Canvas Element<canvas>

Canvas element is a new tag defined in HTML5 whose contents are rendered with Javascript. So, in order to use this, we need to have the tag somwhere in our html document and also a javascript function which is called as the page loads.

Canvas element is a rectangular piece of webspace where you can control the action of each and every pixel according to your wish.

Here is how its tag is defined in the HTML5 document. Later on we will come to the controlling part , Javascript


Your browser does not support the canvas element.


Lets start with the canvas template which we gonna use whenever we are drawing a canvas element :-



    
        
    
    
        
		Your browser doesnot support Canvas Element. So, demo cannot be displayed. 
        
    

In the example above, we first define a place in our HTML document for the canvas tag. This object is accessible to the javascript function through its id. We then get a 2d context using the getContext() method.

To draw a line, we have moveTo, lineTO and stroke methods.moveTo() method creates a new subpath for the given point. It acts as a way to position your drawing cursor.
lineTo() drraws a line from context point to given point.
Stroke() assigns a color to the line , so that it become visible to us.Lets see a demo and then we will explain the code .

 
    context.moveTo(100, 150);
    context.lineTo(350, 50);
	context.lineWidth = 10;
	context.strokeStyle = 'orange';
    context.stroke();

For understanding the arguments passed to the functions, its necessary to understand the coordinate system of our canvas. It starts with (0,0) at the topmost left corner and increases to (x,0) to the topmost right corrner. On descending down the second coordinate y increases. Coming back to the code, moveTo says the cursor to go to point with coordinates (100,150). lineTo then asks it to draw a line till (350,50). lineWidth property sets the width of the line drawn between the two points. To set the color of the line, we fix the strokeStyle, which has been fixed to orange here.

Lets see how we can make lines with a cap at the end. lineCap property is used for setting that. We can set the lineCAp value to either of butt, round or square, whichs brings us following three results.

Hence, by using the lineCap value to our lines, we can modify the ends of our lines. Silly point to be noted is that while using round or square lineCap, length of the line increases by the width of the line set. Half of the width is added to both the sides of line. So, our 2nd and 3rd line shown above are more wider by 20px.

 
	var canvas1 = document.getElementById("myCanvas1");
    var context1 = canvas1.getContext("2d");
    context1.beginPath();
    context1.moveTo(10, 10);
    context1.lineTo(400, 10);
	context1.lineWidth = 15;
	context1.lineCap = "butt";
	context1.strokeStyle = 'orange';
    context1.stroke();
    context1.beginPath();
    context1.moveTo(10, 50);
    context1.lineTo(400, 50);
	context1.lineWidth = 15;
	context1.lineCap = "round";
	context1.strokeStyle = 'orange';
    context1.stroke();
    context1.beginPath();
    context1.moveTo(10, 90);
    context1.lineTo(400, 90);
	context1.lineWidth = 15;
	context1.lineCap = "square";
	context1.strokeStyle = 'orange';
    context1.stroke();

beginPath() asks the cursor to start a new canvas formation. It looses all the previous coordinates when it is called by this method. Rest every line is similar to the code used above.

Once we are done with drawing a line on the canvas , lets try to draw an arc on the canvas. This is as easy as drawing a line. So, lets proceed to arc drawing :-

Member Login

Member Login




Not a Member? Sign Up!




Login to comment

Be the first to comment on this topic







  


<<< Wanna review

Continue >>>