HTML5 Canvas Line Width


In the previous page draw a line on the canvas of with a given starting and end coordinates. By default the width of the line is of single pixel. But we can change the default width using the linewidth property just before calling stroke() method. .

The following example will draw the line of width 4.


<!DOCTYPE html5>
<html>
<body>

<canvas id ="canvas1" width="300" height="200" style="border:2px solid #FF0000;">
</canvas>

<script>
var c1=document.getElementById("canvas1");
var context1=c1.getContext("2d");
context1.moveTo(50,50);
context1.lineTo(200,100);
context1.lineWidth = 5;
context1.stroke();
</script>

</body>
</html>



Try this example Online


Try this example online here. [ It opens in a new tab / windows, so you can come back ] and try to make some changes in the width or the coordinates of the two end points of the line to see how it looks like.

Congratulations !!! You have been able to change the width of the line on the Canvas in HTML5.

So how to we change the color of the line. Read in the next post.