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>

Fallback content for browsers that don't support the canvas tag.

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.