HTML5 Canvas

So all of you by now are quite aware of the release of HTML5 with my guess. Now whats the difference between different revisions of HTML will be explained to you in my further posts.
I am now here to explain this new feature of HTML5, the Canvas.

Whats Canvas?
How to use it?
How will it benefit me?

Let me give you a practical look of it, and then its more easier for you to understand the greek (for some), in a better way.
Download it here

Now what you have used some of the features of Canvas, you must be really excited to know how it works. Actually if you see the code part of the recent downloaded file, you will be able to understand how it works.

In simpler words, canvas is a rectangular space on your html page, where you can draw using JavaScript.

The html markup looks like

this. Yes, there is nothing extra-strange about this, but wait, dont be disappointed so soon. You saw how it works na, now see, how it actually does it all, so smoothly.

Give an id to the canvas, lets say, id=”a”.

So you can easily find the element in the DOM
var a_canvas = document.getElementById("a");


So now, the next step remains is whats the dimension of image you want to create. For now only 2D images can be drawn, 3D is not yet standardized.

var b_context = b_canvas.getContext("2d");
So thats all about it, that you need. the other implementations is well explained in the downloaded file. Get your imaginations control you, and start creating and implementing this new feature in your sites.

To learn more about HTML5.
Any queries, feel free to drop by it in the comment box.

Leave a Reply