HTML5 Canvas Element - Arc / Circle Color and width


In the previous page we saw how to draw a circle line. By default the circle has black color and is 1 pixel wide. We can use the lineWidth and the strokeStyle properties to change the width and the color used to draw the circle.

The following code will draw a circle with width of 5 and blue in 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.beginPath();
context1.arc(100,80,50,0, 2*Math.PI);
context1.lineWidth=5;
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 width and color to see how it looks like.

Congratulations !!! You have been able to changes the circle color and width.