The Canvas element is the part of the HTML5 language that lets you render 2D images and shapes dynamically. It’s a great way to visualize your data (and is how KeyLines renders graphics in a browser) but it’s only part of the story.
Being able to draw things is just the first part of any web-based data visualization project: you also need to add interactivity, compositing images, hit testing and animation. So how do you do it?
Luckily for developers, modern browsers have all the answers.
Create multiple canvases
You can create as many HTML5 canvases as you like – dynamically. As with most things, Internet Explorer is a bit slow making them, especially the older versions, but other browsers are very quick. Using multiple canvases at once, you can composite images, manipulate pixels and perform other animation tricks. Your imagination is really the limit.
Hook into the game loop
So now that we can draw our data visualization in the browser – how do we actually know _when_ to draw it? requestAnimationFrame to the rescue!
requestAnimationFrame is a relatively new method in the web developer’s armoury. It lets the web browser tell you when it is ready to draw your content. The browser is a busy animal. It has many jobs to do – fetching data, rendering, page layouts, the works – so it is critical to know when you the humble page can get a look in.
KeyLines also supports some of the older browsers that don’t support requestAnimationFrame, (e.g. IE9 and earlier). For those cases, we rely on timeout loops to control when content is rendered.
Render your data in 16ms
Once you have been told to draw the data – it is time do it ASAP. If you want a frame rate of 60 fps, you have a budget of just 16ms to get all your data drawing done. That’s a pretty short deadline! Luckily this is where several new innovations help out.
Use fast JavaScript engines
The first are the blazingly fast JavaScript execution engines – Chakra, SpiderMonkey, V8 – this means your compositing code – the part that decides what to draw – runs as quickly as possible.
Optimise your code
The second is the amazing depth of browser development tools. If you have a bottleneck in your code, you need to be able to find it. Chrome in particular has some fantastic development tools that show where your precious 16ms gets spent. You can use this to track down any performance bottlenecks in your rendering code.
Use some speedy hardware…
Lastly, hardware acceleration of the canvas drawing has made a massive difference. Way back in 2011, iOS didn’t have hardware accelerated HTML canvas and everything was so sluggish. This changed with iOS 4 and now iPads and iPhones are amazingly quick to render content, meaning tools like KeyLines can be used on the move. As of a few days ago, even Android devices now (mostly) have hardware acceleration, and it has been standard in desktop browsers for years.
Roll on iOS 8 – which will even support WebGL – but that’s a different blog post altogether…
