Canvas arc(): Draw Arcs and Circles with JavaScript

arc(x, y, radius, startAngle, endAngle, counterclockwise) adds a circular arc to the current Canvas path. Angles are measured in radians from the positive x-axis. Use stroke() to outline the arc or fill() to fill the resulting shape.

Basic arc() example Top ↑

const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI);
ctx.stroke();

arc() syntax and parameters Top ↑

ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

Parameter	Meaning
`x`	Horizontal coordinate of the circle center.
`y`	Vertical coordinate of the circle center.
`radius`	Radius of the circle. It must not be negative.
`startAngle`	Starting angle in radians, measured from the positive x-axis.
`endAngle`	Ending angle in radians.
`counterclockwise`	Optional Boolean. `false` is clockwise (default); `true` is counterclockwise.

arc() adds the arc to the current path. If the path already has a current point, Canvas can connect that point to the start of the arc with a straight segment. Calling beginPath() before an independent arc avoids unintentionally joining it to an earlier path.

Degrees and radians Top ↑

Canvas angles use radians. Common values are Math.PI / 2 for 90°, Math.PI for 180°, and 2 * Math.PI for 360°.

// Convert degrees to radians
const degrees = 40;
const radians = degrees * Math.PI / 180;

ctx.beginPath();
ctx.arc(100, 100, 40, radians, Math.PI, true);
ctx.stroke();

Common arc angles Top ↑

ctx.arc(60, 100, 40, 0, 0.5 * Math.PI);
ctx.arc(180, 100, 40, 0, Math.PI);
ctx.arc(300, 100, 40, 0, 1.5 * Math.PI);
ctx.arc(420, 100, 40, 0, 2 * Math.PI);

Interactive arc demo Top ↑

Change the start and end angles in degrees and choose the direction. The values are converted to radians before calling arc().

Start angle: 40° End angle: 180°

Draw counterclockwise

Clockwise and counterclockwise arcs Top ↑

The final argument controls the direction used to travel from the start angle to the end angle. Omit it or use false for clockwise drawing; use true for counterclockwise drawing.

// Clockwise
ctx.beginPath();
ctx.arc(100, 100, 40, 1.2 * Math.PI, 1.8 * Math.PI, false);
ctx.stroke();

// Counterclockwise
ctx.beginPath();
ctx.arc(220, 100, 40, 1.2 * Math.PI, 1.8 * Math.PI, true);
ctx.stroke();

Drawing a full circle Top ↑

A full circle is commonly drawn from 0 to 2 * Math.PI.

ctx.beginPath();
ctx.arc(100, 100, 40, 0, 2 * Math.PI);
ctx.stroke();

Even when an arc covers the full circumference, the path is not considered closed merely because the endpoints meet. Use closePath() when path closure itself matters.

Fill and style arcs Top ↑

Use strokeStyle for the outline, fillStyle for the fill, and lineWidth for the stroke thickness.

ctx.strokeStyle = 'blue';
ctx.fillStyle = 'red';
ctx.lineWidth = 6;

ctx.beginPath();
ctx.arc(100, 100, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

What happens when you fill an open arc? Top ↑

Calling fill() on an open arc fills the area by treating the open subpath as closed. For a sector or pie-slice shape, explicitly move to the center, draw the arc, and close the path so the intended geometry is obvious.

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.arc(100, 100, 60, 0, 0.75 * Math.PI);
ctx.closePath();
ctx.fillStyle = 'orange';
ctx.fill();
ctx.stroke();

Common arc() mistakes Top ↑

Passing degrees directly to arc() instead of converting them to radians.
Forgetting stroke() or fill(), so the path is created but nothing visible is painted.
Using a negative radius. A negative radius causes an IndexSizeError.
Forgetting beginPath() before an independent arc and accidentally connecting it to an earlier path.
Assuming the final Boolean means clockwise. true means counterclockwise; false is clockwise.
Using arc() when an ellipse is required. For elliptical arcs, use the Canvas ellipse() method.

Accessibility note Top ↑

Canvas drawings are pixels, not semantic HTML. If an arc, dial, chart, or circle communicates important data, provide the same information in accessible text or HTML and do not rely on the visual drawing alone.

Existing Plus2net arc demos Top ↑

Frequently asked questions Top ↑

Does Canvas arc() use degrees or radians? Top ↑

It uses radians. Convert degrees with degrees * Math.PI / 180.

How do I draw a full circle with arc()? Top ↑

Use a start angle of 0 and an end angle of 2 * Math.PI, then call stroke() or fill().

What does the last arc() parameter do? Top ↑

It selects the direction. true draws counterclockwise; false, the default, draws clockwise.

Does arc() draw immediately? Top ↑

No. It adds the arc to the current path. Use stroke() or fill() to paint it.

Can arc() draw an ellipse? Top ↑

arc() creates circular arcs. Use ellipse() when the horizontal and vertical radii need to differ.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Canvas arc(): Drawing Arcs and Circles