HTML5 Canvas Element - Color Fill
It is possible to fill the area inside the circle by setting the fillStyle property to a color string. You can then call the the fill() method just before the stroke method to fill the shape. The default fill style for an HTML5 Canvas shape is black.
The following code will draw a circle with width of 5 and fill it in yellow 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.lineWidth = 5;
context1.arc(100,80,50,0, 2*Math.PI);
context1.fillStyle = 'yellow';
context1.fill();
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 fill color to see how it looks like.
Congratulations !!! You have been able to changes the fill color of the circle.