A Case for Canvas

Nathaniel — Fri, 31 Oct 2008 00:00:57 +0000

I recently came across this page, which shows a rudimentary rotating 3D cube made entirely of javascript. Since I’m a code geek I of course thought it deserved a kudo or two, but it got me thinking; why isn’t the canvas tag more widely used (or supported natively in Internet Explorer)? For those of you who don’t know what the canvas tag is, it’s essentially an environment for drawing things on the fly in web pages, without having to use a plug-in like Flash. It is probably something that is easiest to appreciate through some examples, so I present to you the following simple comparison of what can be done with javascript alone versus javascript plus the canvas tag (scroll your mouse over the cubes to rotate them):

Javascript Only:

Javascript and the Canvas Tag:

The top cube makes use of 18 images (for drawing the lines via the trick described here) and about 1.0kB of javascript code. The bottom cube is animated using 509 bytes of javascript code in conjunction with the canvas tag. That’s it — no auxilliary images or plug-ins of any kind.

Personally, I think that’s pretty awesome, and I wish that the usage of the canvas tag would leave the realm of the tech demo. People need to realize its potential and start really using it. It’s supported in all major current browsers (OK, you have to do some trickery to get it to work in Internet Explorer, but it still requires no work on the part of the end-user) and it does things that simply can not be done otherwise without loading a plug-in like Flash. Consider the following variation of the 3D rotating cube:

Colour Cube via Canvas Tag:

I believe that it’s flat-out impossible to replicate the above coloured cube using only CSS and javascript without the canvas tag, but even if it is possible, it certainly won’t be easy or scalable — the canvas tag is both.

Related Links

Canvas Tutorial - A tutorial provided by Mozilla for using the canvas tag.

Nathaniel Johnston » Javascript

A Case for Canvas