Web/API/CanvasRenderingContext2D/arc

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. If true, draws the arc counter-clockwise between the start and end angles. The default is false (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();

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
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2012/07/09/204/370c33c99436bb42b3b7b547dec13b72/Canvas_arc.png|class=internal]]

Specifications

Specification	Status	Comment
HTML Living StandardThe 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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
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.

CanvasRenderingContext2D.arc() by Mozilla Contributors is licensed under CC-BY-SA 2.5.