Canvas arc() method
Definition and usage
arc() Method to create arcs/curves (used to create circles or parts of circles).
Tip:To create a circle using arc(), set the start angle to 0, the end angle is set to 2*Math.PI.
Tip:Please use stroke() or fill() The method draws an 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)
Example
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 | The x-coordinate of the center of the circle. |
| y | The y-coordinate of the center of the circle. |
| r | The radius of the circle. |
| sAngle | Start angle, in radians. (The circular position of 3 o'clock is 0 degrees). |
| eAngle | End angle, in radians. |
| counterclockwise | Optional. Specifies whether the drawing should be counterclockwise or clockwise. 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.
