Using HTML5 Canvas
HTML5 canvas element creates rectangular area on your HTML5 webpage. It is defaulted at 350 by 150 pixels which can be reset to your own specifications. It is normally added to the page with the help of the following tag
<canvas></canvas>
HTML5 allows you to manipulate this canvas tag via JavaScript in many different ways which makes canvas very flexible in what you can do with them. For example, you can insert images, text or drawings into canvas.
Once you have added a canvas element to your page, you can use JavaScript to manipulate it any way you want. You can add graphics, lines, and text to it; you can draw on it; and you can even add advanced animations to it.
The HTML5 canvas provides support for two dimensional operations. It is big improvement over what could have been done in the past with images and CSS.
In order to start using canvas you need to get its context first. You can then call and apply actions to this context. These actions are somewhat similar to creating a transaction. You need to do action first and then there is a commit phase at the end of the action.