Blog > A Case for Canvas

A Case for Canvas

October 30th, 2008

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.
  1. December 4th, 2009 at 13:35 | #1

    dude! this is awesome. what a sweet technology.

  2. September 11th, 2014 at 21:40 | #2

    The staff will take care of any problem
    should anything goes wrong with outsourcing.

    Unless you have the time and resources to continually send
    one of your staff for training and education, it is better to outsource the technology and communications tasks to a company
    that is equipped to handle these needs because that is all that they do.
    In the wider global economy, business services have
    always been the fastest growing segment.

  3. September 11th, 2014 at 23:16 | #3

    Yesterday, while I was at work, my sister stole my iPad
    and tested to see if it can survive a thirty foot drop, just so she can be a youtube sensation. My
    apple ipad is now destroyed and she has 83 views.
    I know this is totally off topic but I had to share it with

  4. September 12th, 2014 at 02:34 | #4

    Heya i’m for the primary time here. I came across this
    board and I to find It really helpful & it helped me out much.

    I’m hoping to provide one thing back and help others such as you helped me.

  5. September 12th, 2014 at 03:45 | #5

    Very shortly this web site will be famous among
    all blog people, due to it’s fastidious content

  1. No trackbacks yet.