Building Better HTML5 Games With Canvas

Canvas drawing speeds in Firefox 4 beta 7

The Canvas element is one of the most exciting parts of HTML5. It gives web developers a blank slate to create animations, games or even interactive video elements, all of which previously required plugins like Flash or Silverlight.

Canvas is not, however, a panacea — just because you can does not mean you should. Canvas-based animations can slow down pages, send your PC’s fan into overdrive and produce stuttering, frame-dropping ugliness. The stunning HTML5 experiment The Wilderness Downtown, was indeed very cool, but it also nearly crippled even the newest PC hardware.

As with most programming, the trick to using HTML5′s canvas element is knowing how to optimize your code so it works within the limits of today’s browsers.

We’ve looked at some tips and tricks for working with canvas in the past. At Mozilla’s recent Open Web Gaming conference, Ernesto Jiménez, lead developer at gaming company Six to Start, outlined some more handy tips for building canvas-based HTML5 games.

While a few of these tips are specific to games, in general they’re simply good ideas for anyone working with the canvas element — whether it’s games, animations or graphs.

Jiménez’s covers tips like drawing new elements offscreen and then copying them into your onscreen canvas to avoid flickering animations, and minimizing processor-intense operations like getImageData or fillText. He also talks about how to break up your animations into multiple canvas elements for smaller, faster graphics.

Jiménez’s slideshow gives a basic overview of the tips, but there’s also a video of the talk which includes a bit more detail on why these tips are helpful:

See Also: