###### Summary -

In this topic, we described about the Drawing a circle with detailed example.

The arc() method is used to create a circle in HTML5 with the canvas element.The arc() method builds an arc/curve (used to create circles, or circles parts).For a circle with arc() technique, use the start angle as 0 and end angle to 2*Math.PI.

#### Syntax -

``````context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
``````

The following table describes the parameter values of the arc() method –

S. No Parameter Description
1 X x-coordinate
2 Y y-coordinate
3 r Radius of the circle
4 startingAngle Starting angle in radians
5 endingAngle Ending angle in radians
6 counterclockwise (True/False) For counterclockwise drawing, select True, else, false

#### Example -

Following example describes how to draw a circle using arc() method in the empty canvas.
``````<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="200"
style="border:2px solid #f3d4d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55,40,30,5,7*Math.PI);
ctx.stroke();
</script>
</body>
</html>
``````

#### Output: -

Your browser does not support the HTML5 canvas tag.

## Browser Support

The following browsers with versions in the table indicates the initial browser version that completely supports the arc method -

Method Chrome Edge Firefox Safari Opera
arc( ) Yes 9.0 Yes and above Yes Yes Yes