Create a circle:
JavaScript:
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the arc() method.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
The arc() method creates an arc/curve (used to create circles, or parts of circles).
Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI.
Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.
JavaScript syntax: | context.arc(x,y,r,sAngle,eAngle,counterclockwise); |
---|
Parameter | Description | Play it |
---|---|---|
x | The x-coordinate of the center of the circle | Play it » |
y | The y-coordinate of the center of the circle | Play it » |
r | The radius of the circle | Play it » |
sAngle | The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) | Play it » |
eAngle | The ending angle, in radians | Play it » |
counterclockwise | Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. | Play it » |