The arc() method is used to create a circle in HTML5 with the canvas element. For a circle with arc() method, use the start angle as 0 and end angle to 2*Math.PI.
Here are 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 counter clockwise drawing, select True, else, false |
Example
You can try to run the following code to draw a circle with arc() method in HTML5 −
<!DOCTYPE html>
<html>
<head>
<title>HTML Canvas</title>
<head>
<body>
<canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
ctxt.beginPath();
ctxt.arc(100,75,50,0,2*Math.PI);
ctxt.stroke();
</script>
</body>
</html>