Why use canvas for animation in html5?

Question

I'm new to html5 and have been playing around with the canvas. I'm wondering when the canvas would really be necessary/useful? i.e. when is it meant to be used?

If i need to do simple animation, like move tags around, do i really need a canvas or is it better/easier to just use jquery/js?

Answer 1

With help of canvas you can create 2D graphic applications, animations, simple transformation of images (like rotating them), GUI etc. Some examples:

1. Asteroids game
2. jigsaw puzzle
3. About GUI, unfortunately I can't load a site, no idea why... it was called iWidgets.com, the only thing I've found is a screenshot. You can see blue pipeline there, they bound elements. It was done with help of canvas; while moving elements, pipelines also were redrawing; when you change active element all its connections changes color to yellow (so you see dependencies). Nice project, I hope it is not accessible just for a while...

Good article about how to use it is here

From "An insight into the HTML5 Canvas Element":

The canvas element is interesting and worthy of focus because it enables, for the first time, direct drawing of graphics within a browser without the use for an external plugin like Flash or Java. The beauty of canvas is that it’s controlled entirely via simple JavaScript code, meaning it builds on the powerful functionality JavaScript already provides and doesn’t require a crazy learning curve to use.

Choosing to experiment with canvas over other new elements was simply down to it’s functionality as a graphics platform, which inherently makes it a potentially interesting and rich platform to play with. It was decided that pushing the flexible canvas element would produce the most interesting results that we can use in the application.

Another deciding factor for choosing canvas was to test the animation capabilities and the possibility of it being a potential Flash replacement. Now Flash obviously has features that canvas could never emulate, however it’s an exciting concept nonetheless to see exactly what could be achieved with canvas that would normally be done by reaching for Flash.

read that article to get more useful information

PS. If your animation is about tags moving (like parts of your page), then canvas does not fit. Canvas is for graphic rendering. So in that case you will use jquery or other JS libraries.

Answer 2

Here's the best practices for deciding when to use CSS3 Transitions / Animations or Canvas. Keep in mind that if you're using jQuery, under the covers they will be using CSS3 transitions or animations when possible.

CSS3 Translations / Animations - use these if you're animating DOM element styles, such as position and size

Canvas animations - use canvas animations if you're animating something more complex, like if you're creating an online game or building a physics simulator. If you're animating 3-d models, you'll definitely want to use canvas so that you can leverage WebGL

Answer 3

Canvas gives you access to the pixel level of the graphics. If you wanted to do a checkerboard transition you could do that with a script in canvas but not in jquery.

For a few examples of what is possible (already been done) see http://www.netzgesta.de/transm/