As parts of the HTML5 spec is slowly making its way from working draft to W3C recommendation and browser implementations are getting more and more solid – the urge to make use of these new features grows strong.

Coming from a Flash background, and being a sucker for anything that moves or can be interacted with, I am most excited about the introduction of the <canvas> element which allows for bitmap drawing through JavaScript. I started creating some visual experiments using canvas a few months back and have gathered some thoughts and technical tips throughout.

Cross browser implementation

There are no major discrepancies between the canvas outputs of different browsers so long as the JavaScript code is written correctly (if not, browsers tend to try and fix things for you, often resulting in varying results).

Update: Obviously there are some differences, what I am trying to say here is that during my experimenting I did not encounter any show-stopper differences in any of the native browser implementations of canvas (this excludes excanvas).

Performance

When working with animation on canvas, performance can be a challenge since bitmap operations are very processing expensive, especially at high resolutions. One important optimization rule to follow is to reuse as many pixels as possible between frames. What I mean by that is the fewer pixels that need to be processed each frame, the faster your program will run. A good example of this is when erasing pixels with the clearRect(x,y,w,h)method, it is very beneficial to clear and redraw only the pixels that have changed and not, for instance, a full screen 1920x1280 sized canvas. Unlike the Flash Player’s redraw regions, this management of “dirty rectangles” needs to be done manually for canvas.

State stack & transformation

The canvas can be manipulated via transformations such as rotation and scaling, resulting in a change to the canvas co-ordinate system. This is where it’s important to know about the state stack for which two methods are available: “save” (pushes the current state to the stack) and “restore” (reverts to the previous state). This enables you to apply transformation to a drawing and then restore back to the previous state to make sure the next shape is not affected by any earlier transformation. The states also include properties such as the fill and stroke colors.

Compositing

A very powerful tool at hand when working with canvas is compositing modes which, amongst other things, allow for masking and layering. As an example, you can check out Bakemono, where composite modes are used to mask the eye and mouth. There's a wide array of available composite modes and they are all set through the canvas context's “globalCompositeOperation” property.

Anti-aliasing

To allow for sub-pixel drawings, all browser implementations of canvas employ anti-aliasing (although this does not seem to be a requirement in the HTML5 spec). Anti-aliasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. To work around this you will need to either round to integer values or offset by half a pixel depending on if you’re drawing fills or strokes.

Clearing the canvas

To clear the entire canvas of any existing pixels you would normally use the clearRect(x,y,w,h) function but there is another option available. Whenever the width/height of the canvas are set, even if they are set to the value they already have, the canvas is reset. This is good to know when working with a dynamically sized canvas as you will notice drawings disappearing.

More info

If you’re interested in learning more about canvas, I would suggest using this guide to get startedhttp://diveintohtml5.org/canvas.html, and the following to keep you going: http://simon.html5.org/dump/html5-canvas-cheat-sheet.html.

Conclusion
Canvas has been around for quite a while already and is supported by all modern, and some not so modern, browsers. This being the case, I think it’s very much ready to be used for real production. On the top of my head, some suitable places to utilize canvas would be to enrich buttons, charts/data visualization and navigational elements such as a list of thumbnails for an image gallery.

Hakim El Hattab

Senior Interactive Developer here at Fi in Stockholm Sweden

Fi is a multi award winning global interactive firm and production studio. With offices in Europe and the US, Fi caters for brand leaders such as FOX, HTC, BBC, MTV, Nintendo, Porsche, Burton and more. If you would also like to rock our socks off with HTML5 awesomeness, please see our openings http://f-i.com/fi/careers