Draw a Circle using the HTML <canvas> Tag

<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

Determines the x-coordinate for the circle's center.

100

Determines the y-coordinate for the circle's center.

70

The circle's radius.

0*Math.PI

Determines the start angle in radians (where the circle begins). 0 is at the 3 o'clock position.

2*Math.PI

Determines the end angle in radians (where the circle ends). The value of 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.