Why use canvas for animation in html5?

Question

I am new to html5 and play with canvas. I wonder when the canvas will really be necessary / useful? those. When is it intended for use?

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

Answer 1

Using the canvas, you can create 2D graphics applications, animations, simple image conversion (for example, rotating them), a graphical interface, etc. Some examples:

• asteroid game
• puzzle
• About the GUI, unfortunately, I can’t download the site, I don’t know why ... it was called iWidgets.com , the only thing I found was a screenshot . There you see a blue pipeline, they are connected by elements. This was done using canvas; while moving elements, pipelines also redrawn; when the active element changes, all its connections change color to yellow (so that you see the dependencies). A good project, I hope it is not available only for a while ...

A good article on how to use it is here

From Understanding HTML5 Canvas Element :

The canvas element is interesting and noteworthy because it allows, for the first time, a direct drawing of graphics in a browser without using it for an external plug-in, such as Flash or Java. The beauty of the canvas lies in the fact that it is completely controlled through simple JavaScript code, which means that it is based on the powerful functionality of JavaScript already provides and does not require a crazy learning curve.

The choice of experimenting with the canvas on other new elements was simply up to its functionality as a graphical platform, which inherently makes it a potentially interesting and rich platform for the game. it was decided that the canvas element would produce the most interesting results that we can use in applications.

Another deciding factor for choosing a canvas was to test the animation of the possibilities and possibilities of this being a potential replacement for Flash. Flash now obviously has features that the canvas could never emulate, however its exciting concept is, nevertheless, to see what exactly can be achieved with the canvas, which is usually done by reaching for Flash.

read this article for more helpful information

PS. If your animation involves moving tags (for example, parts of your page), the canvas is not suitable. The canvas is intended for graphic rendering. Thus, in this case you will use jquery or other JS libraries.

Answer 2

Here are some guidelines for choosing CSS3 Transitions / Animations or Canvas. Keep in mind that if you use jQuery, under covers they will use CSS3 transitions or animations whenever possible.

CSS3 Translations / Animations - Use them if you are animating DOM element styles such as location and size

Animations in canvas - use canvas animation if you are animating something more complex, for example, if you are creating an online game or creating a physical simulator. If you are animating 3D models, you will definitely want to use the canvas so you can use WebGL

Answer 3

Canvas gives you access to pixel level graphics. If you want to switch to a chess table, you can do this with a script in the canvas, but not in jquery.

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