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>

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

var c1=document.getElementById("canvas1");
var context1=c1.getContext("2d");

context1.arc(100,80,50,0, 2*Math.PI);


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.