Naveen's Weblog

Bridge to future

HTML 5 Canvas – Line

Posted by codingsense on September 9, 2012



In the previous post we have drawn all the available objects on the canvas.
Lets look into the drawLine method.

<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<script type="text/javascript">

    function load() {
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');

        // Always check this for non supported browsers
        if (elem.getContext('2d')) {
            // Get the 2d context.
            var context = elem.getContext('2d');
            //Set color for filling
			context.fillStyle = "#62ADE3";
			//Apply the rectangle with set color
            context.fillRect(0, 0, 500, 500);
			
			drawLine(10, 10, 100, 100);
		}
	}
	
	function drawLine(sourceX, sourceY, destinationX, destinationY) {
        var elem = document.getElementById('myCanvas');
        var context = elem.getContext('2d');
        context.strokeStyle = "rgb(0, 0, 0)";
        context.lineWidth = 3;
        context.moveTo(sourceX, sourceY);
        context.lineTo(destinationX, destinationY); // Black line
        context.stroke();
    }

</script> 

</head>
<body onload = load();>
	<canvas id="myCanvas" width="500" height="250">
		Hi I am Mr.Canvas and your browser doesn't support me 😦
	</canvas>
</body>
</html>
  1. First we get the canvas element and the context.
  2. Next we set the stroke style, that is what color brush has to be used to draw the line.
  3. Set the line width
  4. Move the starting point to sourceX and sourceY pixels.
  5. From there we draw line to the given destinationX and destinationY pixels.
  6. And we stoke the element, this is actully where the line is drawn on the canvas.

So only moveTo and lineTo methods are enough to draw a line on a canvas. But in many other tutorials you have seen beginPath and closePath methods also used. Lets see why they are used and when its useful to use them.

<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<script type="text/javascript">

	var context;
    function load() {
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');
		
        // Always check this for non supported browsers
        if (elem.getContext('2d')) {
            // Get the 2d context.
            context = elem.getContext('2d');
            //Set color for filling
			context.fillStyle = "#62ADE3";
			//Apply the rectangle with set color
            context.fillRect(0, 0, 500, 500);
			drawPath();
			
		}
	}
	
	function drawPath() {
		context.strokeStyle = "rgb(0, 0, 0)";
        context.lineWidth = 3;
		context.beginPath();
		context.moveTo(10,10);
		context.lineTo(100, 100);//1
		context.lineTo( 70, 180);//2
		context.lineTo(30, 200);//3
		//context.closePath();
        context.stroke();
    }

</script> 

</head>
<body onload = load();>
	<canvas id="myCanvas" width="500" height="250">
		Hi I am Mr.Canvas and your browser doesn't support me 😦
	</canvas>
</body>
</html>

Copy the above code and run it. You will see 3 lines drawn on the canvas. Now uncomment the context.closePath() in the drawPath method and see what happens.
Consider you want to draw a path on the canvas and then you need to join the last point drawn with the starting point, then the beingPath and closePath methods are handy.

Note that when drawing path you can use moveTo method only once between beginPath and closePath methods. If there is another moveTo then it will start up a new path and the closePath will not close the path as desired.


Happy Learning 🙂
Codingsense

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: