Easy Tutorial
❮ Jsref Tolocalestring Prop Frame Contentdocument ❯

HTML canvas arc() Method

Canvas Object

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();

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.

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

Parameter Values

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 The starting angle, in radians (the three o'clock position on the circle is 0 degrees).
eAngle The ending angle, in radians.
counterclockwise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False = clockwise, true = counterclockwise.

Canvas Object

❮ Jsref Tolocalestring Prop Frame Contentdocument ❯