# Draw Arc on HTML5 canvas

To draw arcs and circles, we use the arc method like as:

`arc(x, y, radius, startAngle, endAngle, anticlockwise)`
Where x and y are the coordinates of the circle’s center. Radius is self explanatory. The startAngle and endAngle parameters for the start and end points of the arc in radians from the x axis. The anticlockwise parameter is a Boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction. See the figure 1.

### Example

The following example will draw six arc shape, three arc use the stroke outlined style and a rest of all use fill style. With the example you will get the clear idea about the start and end angle.

``` function draw() {
var ctx;
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
ctx.arc(20, 100, 40, 0, Math.PI * 3 / 2, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(120, 100, 40, 0, Math.PI, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(220, 100, 40, 0, Math.PI / 2, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(320, 100, 40, 0, Math.PI * 2, true);
ctx.stroke();

ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(20, 200, 40, 0, Math.PI * 3 / 2, true);
ctx.fill();

ctx.beginPath();
ctx.arc(120, 200, 40, 0, Math.PI, true);
ctx.fill();

ctx.beginPath();
ctx.arc(220, 200, 40, 0, Math.PI / 2, true);
ctx.fill();

ctx.beginPath();
ctx.arc(320, 200, 40, 0, Math.PI * 2, true);
ctx.fill();
}
}```

From the above all arc methods use the anticlockwise direction. This parameter is not required in the Safari browser.

Figure 1