| 2022-03-22

# How to Draw a Circle With HTML5 Canvas

Draw a circle in a cavas html element using the arc method.

```
ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2, false);
ctx.strokeStyle = "blue";
ctx.stroke();
```

javascript

The arc canvas API method takes five (or optionally 6) arguments.

```
arc( x, y, r, sAngle, eAngle )
```

JavaScript

`x`

The x-coordinate of the center of the circle, `y`

The y-coordinate of the center of the circle, `r`

The radius of the circle, `sAngle`

The starting angle, in radians (0 is at the 3 o’clock position of the arc’s circle), `eAngle`

The ending angle.

Note that the start / end angle of the arc is expressed in radians. That is why the end angle is `2*PI`

. `2*PI`

is equivalent to 360 degrees.

Here is a link to the HTML and JavaScript for this app. View page source to see the code.

Thanks for reading. If you enjoyed this post, I invite you to explore more of my site. I write about web development, programming, and other fun stuff.