HTML5 Canvas Line Color


In the previous page we learned how to draw a line with a given width. By default the color of the line is black. But we can change the color of the line using the strokeStyle property just before calling stroke() method. .

The following example will draw the line in blue color.


<!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.strokeStyle = 'blue';
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 color 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 color of the line on the Canvas in HTML5.

So how to we draw circle on the canvas in HTML5. Read in the next post.