I think by now we are moving good on Canvas element and now its time to know some more basics about the canvas element which will get us up and running on the canvas.

Firstly the co-ordinate system. Well, the origin of the canvas element is at the top-left corner. The x-axis increases its value form left to right from the origin. The y-axis increases its value from top to bottom form the origin.

Now there is an important concept about Canvas element which can get in our way. That is the resetting of the Canvas element altogether. Resetting means, Canvas comes back to its initial stage, the default settings with which it has been created. And this happens when we set either width or height of the Canvas through our code. Well, we can use that to our advantage also. Suppose we have already drawn a lot of drawing on the Canvas and now we want to clear everything. Then we can just set the width and height of the canvas to its original width and height. Though that does not change the size of the Canvas itself, but it will reset the Canvas to its default state removing all the drawings. Lets say that again, even if we set the width and height of the Canvas element to its own width and height, it will reset the Canvas to its default. This can be an advantageous to us if we use it and at the same time it can be a disadvantageous to us if we overlook the effect.

Getting started with the canvas on HTML5 is kind of diving right into the HTML5 world and forgetting anything of past of a web browser. I am not going to talk more about it here, rather I think by this time you already have known this. Instead we will jump into the canvas example right away.
Here is the source code of the files for you to download and run.
The HTML code looks as

	


		
		
		
	
	
		

			Hello World.
		
		
		
		
		
	

We have added two canvas tags in our HTML document. These canvas tags are kind of actual Canvas of or a drawing board. Yes, now we have a proper drawing board in HTML. I have added two canvas tags so as to know that there is no restriction on the number of Canvas tags. Now lets look at the javascript code. It looks like

$.ready()
{
	//first canvas
	//var canvas_one=$('#board_one')[0];
	var canvas_one=document.getElementById('board_one');
	var context_one=canvas_one.getContext("2d");
	context_one.fillStyle = "#f00";
	context_one.fillRect(50, 25, 150, 100);
	//second canvas
	var canvas_two=$('#board_two')[0];
	var context_two=canvas_two.getContext("2d");
	context_two.fillStyle = "#0f0";
	context_two.fillRect(10, 10, 200, 50);
	//
	context_two.beginPath();
	context_two.arc(300,100,50,0,rads(360),false);
	context_two.closePath();
	//
	// Define some graphics attributes and draw the curves
	context_two.fillStyle = "#aaa";  // Gray fills
	context_two.strokeStyle = "blue"; // Stroke lines in blue
	context_two.lineWidth = 5;       // 5-pixel black (by default) lines
	context_two.fill();              // Fill the curves
	context_two.stroke();            // Stroke their outlines
	
	//experiement with first canvas
	context_one.strokeStyle = "blue"; // Stroke lines in blue
	context_one.fillStyle = "#aaa";
	context_one.fillRect(300, 50, 50, 100);
	//
	// A utility function to convert from degrees to radians
	function rads(x) { return Math.PI*x/180; }  
};

Just open up the HTML file in any web browser to see the drawings in action. And thats simple, is not it! Now we have two rectangles in first canvas and two shapes(one rectangle and a circle) in second canvas.
The important part here is to understand the drawing board or the Canvas in HTML. Well, the thing is first we get the canvas element in our javascript code.

var canvas_one=document.getElementById('board_one');

Now this is not the plane or not the slate where we are going to draw. To get the surface to draw, we have to get that with the code below

var context_one=canvas_one.getContext("2d");

This is known as context and can be a 3d context to draw 3d or 2d context to draw 2d. We are getting the 2d context object here known as CanvasRenderingContext2D object. The 3d context object is referred as “webgl” instead of “2d” in the “getContext()” method. WebGL is an API which is a javascript implementation of OpenGL. Yet, WebGL is a large and complicated API and it is suggested to use a third party library for the same. But all in all we got the idea.

To summarize it all,

1. Add a canvas tag specifying width and height
2. Get the canvas element in javascript
3. Get the context forma the canvas
4. Start drawing
5. Enjoy

Hope that helps someone one out there.