canvas animation

What is canvas animation in HTML5?

This feature is present in HTML5 templates. Every object drawn on the canvas can be animated. Animation works by changing the properties of the element, or layer, in such small increments, that it looks smooth to the user. If you slow down animation, and make these increments larger, you will actually be able to see the element jumping between the different increments.

The advantages of Canvas animation in HTML5 are listed below:

• Canvas can draw colorful text, with or without animation;
• Canvas has great features for graphical data presentation with an imagery of graphs and charts;
• Canvas objects can move. Everything is possible: from simple bouncing balls to complex animations;
• Canvas can respond to JavaScript events. Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement);
• Canvas’ methods for animations offer a lot of possibilities for HTML applications.

In HTML, a canvas element looks like this:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas> 

The canvas element must have an id attribute so it can be referred to by JavaScript. The width and height attribute is necessary to define the size of the canvas. You can have multiple canvas elements on one HTML page.