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


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.

Featured pages


Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …


Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…


 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …