CanvasRenderingContext2D.arc()

The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).

Syntax

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

Parameters

x
The x coordinate of the arc's center.
y
The y coordinate of the arc's center.
radius
The arc's radius.
startAngle
The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
endAngle
The angle at which the arc ends, measured clockwise from the positive x axis and expressed in radians.
anticlockwise Optional
An optional Boolean which, if true, causes the arc to be drawn counter-clockwise between the two angles. By default it is drawn clockwise.

Examples

Using the arc method

This is just a simple code snippet drawing a circle.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Edit the code below and see your changes update live in the canvas:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Different shapes demonstrated

In this example different shapes are drawn to show what is possible when using arc().

HTML
<canvas id="canvas" width="150" height="200"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Draw shapes
for (i=0;i<4;i++){
  for(j=0;j<3;j++){
    ctx.beginPath();
    var x              = 25+j*50;               // x coordinate
    var y              = 25+i*50;               // y coordinate
    var radius         = 20;                    // Arc radius
    var startAngle     = 0;                     // Starting point on circle
    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
    var anticlockwise  = i%2==1;                // Draw anticlockwise
   
    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
   
    if (i>1){
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

ScreenshotLive sample

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.arc' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Gecko-specific notes

Starting with Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):

  • The anticlockwise parameter is optional,
  • Specifying a negative radius now throws a IndexSizeError error ("Index or size is negative or greater than the allowed amount").

See also

Document Tags and Contributors

 Contributors to this page: hwiechers, fscholz, michaellaszlo
 Last updated by: hwiechers,