CanvasRenderingContext2D: arc() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.

Syntax

js
arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)

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 counterclockwise (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.

counterclockwise Optional

An optional boolean value. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).

Return value

None (undefined).

Examples

Drawing a full circle

This example draws a complete circle with the arc() method.

HTML

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°).

js
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().

js
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 counterclockwise = i % 2 === 1; // Draw counterclockwise

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

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

Result

Specifications

Specification
HTML Standard
# dom-context-2d-arc-dev

Browser compatibility

BCD tables only load in the browser

See also