<canvas id="canvas" width="350" height="350">
<p>Fallback content for browsers that don't support the canvas tag.</p>
</canvas>
<script>
var c = document.getElementById("canvas");
var ctxCircle = c.getContext("2d");
ctxCircle.beginPath();
ctxCircle.arc(120,100,70,0*Math.PI,2*Math.PI);
ctxCircle.fillStyle="GreenYellow";
ctxCircle.fill();
ctxCircle.strokeStyle="ForestGreen";
ctxCircle.stroke();
</script>
The above example demonstrates how to draw a circle using the HTML <canvas>
element.
The circle is defined with the following line: ctxCircle.arc(120,100,70,0*Math.PI,2*Math.PI);
Here's an explanation of those values:
120
100
70
0*Math.PI
0
is at the 3 o'clock position.2*Math.PI
2
indicates that it's a full circle (less than 2 would be a partial circle)We also use fillStyle
and fill()
to fill the circle with a color, and the strokeStyle
and stroke()
to draw a stroke around the outside of the circle.