# 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`
`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.