The CanvasRenderingContext2D
.arc()
method of the Canvas 2D API adds a circular arc to the current sub-path.
Syntax
void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
The arc()
method creates a circular arc centered at (x, y)
with a radius of radius
. The path starts at startAngle
, ends at endAngle
, and travels in the direction given by anticlockwise
(defaulting to clockwise).
Parameters
x
- The horizontal coordinate of the arc's center.
y
- The vertical coordinate of the arc's center.
radius
- The arc's radius. Must be positive.
startAngle
- The angle at which the arc starts in radians, measured from the positive x-axis.
endAngle
- The angle at which the arc ends in radians, measured from the positive x-axis.
anticlockwise
Optional- An optional
Boolean
. Iftrue
, draws the arc counter-clockwise between the start and end angles. The default isfalse
(clockwise).
Examples
Drawing a full circle
This example draws a complete circle with the arc()
method.
HTML
<canvas></canvas>
JavaScript
The arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. To make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°).
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke();
Result
Different shapes demonstrated
This example draws various shapes to show what is possible with arc()
.
HTML
<canvas width="150" height="200"></canvas>
JavaScript
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); // Draw shapes for (let i = 0; i <= 3; i++) { for (let j = 0; j <= 2; j++) { ctx.beginPath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; // Arc radius let startAngle = 0; // Starting point on circle let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle let anticlockwise = i % 2 == 1; // Draw anticlockwise ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } }
Result
Screenshot | Live sample |
---|---|
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.arc' in that specification. |
Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
arc | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 9 | Opera Full support 11.6 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
- The interface defining this method:
CanvasRenderingContext2D
- Use
CanvasRenderingContext2D.ellipse()
to draw an elliptical arc.