Easy Tutorial
❮ Av Event Waiting Html Paragraphs ❯

HTML canvas arc() Method

HTML canvas Reference Manual

Example

Create a circle:

JavaScript:


Browser Support

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.


Definition and Usage

The arc() method creates an arc/curve (used to create circles or parts of circles).

Tip: To create a circle with arc(), set the start angle to 0 and the end angle to 2*Math.PI.

Tip: Use the stroke() or fill() method to actually draw the arc on the canvas.

100,75, 50, 0*Math.PI, 1.5*Math.PI)

0, 1.5*Math.PI)

1.5*Math.PI)

| JavaScript Syntax: | context.arc(x, y, r, sAngle, eAngle, counterclockwise); | | --- | --- |

Parameter Values

Parameter Description
x The x coordinate of the circle's center.
y The y coordinate of the circle's center.
r The radius of the circle.
sAngle The start angle, in radians (the three o'clock position on the circle is 0 degrees).
eAngle The end angle, in radians.
counterclockwise Optional. Specifies whether to draw counterclockwise or clockwise. False = clockwise, true = counterclockwise.
❮ Av Event Waiting Html Paragraphs ❯