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.