HTML canvas arc() method
Definition and Usage
arc() The method creates an arc/curve (used to create a circle or part of a circle).
Tip:If you want to create a circle through arc(), set the start angle to 0,and set the end angle to 2*Math.PI.
Tip:Please use stroke() or fill() The method draws the actual arc on the canvas.
- Center: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Start angle: arc(100,75,50,
0,1.5*Math.PI) - End angle: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Instance
Create a circle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Syntax
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Parameter Value
| Parameter | Description |
|---|---|
| x | X coordinate of the center of the circle. |
| y | Y coordinate of the center of the circle. |
| r | Radius of the circle. |
| sAngle | Start angle, in radians. (The circular position of the arc at 3 o'clock is 0 degrees). |
| eAngle | End angle, in radians. |
| counterclockwise | Optional. Specifies whether to draw in a clockwise or counterclockwise direction. False = clockwise, true = counterclockwise. |
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
