Did you find this useful?
Socialize it today.

# HTML5 Canvas: Circles and Arcs

Friday, October 26, 2012

To create circles (arcs) onto the HTML5 Canvas, we can use the arc() method. Arcs are defined by a center point, radius, starting angle, ending angle, and the arc drawing direction. The canvas element and arc() method is supported by Internet Explorer 9, Firefox, Opera, Chrome, and Safari. In this first example, we will draw a circle.

In instances where you need to draw a semi-circle, or a custom arc, you can use the same method. An arc simply a section of the circumference of a circle. So, we can define this arc by a starting point (x, y), radius, and starting and ending points on the perimeter of the circle. Finally, we pass an optional parameter in the arc() method to indicate the path between the endpoints. The default value for this parameter is false, which is the equivalent to "clockwise".

## Syntax

ParameterDescription
xThe circle's x coordinate
ythe circle's y coordinate
counterClockwiseOptional parameter. Default is false

## Example

<canvas id="myCanvas" width="400" height="200">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(200, 100, 50, 0, 2 * Math.PI);
context.stroke();
</script>

Your browser does not support the HTML5 canvas tag.

We can use some of the other properties and methods we have learned in the previous articles to modify other properties of this shape. We can also adjust the parameters of the arc() method to make a semi-circle. Also, you should note that the closePath() method is included so that the semi-circle becomes a closed shape.

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(200, 150, 100, 1 * Math.PI, 2 * Math.PI);
context.closePath();
context.fillStyle = '#FFAA00';
context.fill();
context.lineWidth = 6;
context.strokeStyle = '#7F7F7F';
context.stroke();
</script>

Your browser does not support the HTML5 canvas tag.