I volontari di MDN non hanno ancora tradotto questo articolo in Italiano. Unisciti a noi e traducilo tu stesso.
Puoi anche consultare l’articolo in English (US).

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


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


The x coordinate of the arc's center.
The y coordinate of the arc's center.
The arc's radius.
The angle at which the arc starts, measured clockwise from the positive x axis and expressed in radians.
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.


Using the arc method

This is just a simple code snippet drawing a circle.


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


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

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

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" />
<textarea id="code" class="playable-code">
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
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);

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

edit.addEventListener("click", function() {

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

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

// Draw shapes
for (var i = 0; i < 4; i++) {
  for(var j = 0; j < 3; j++) {
    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) {
    } else {

ScreenshotLive sample


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

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes


Full support  
Full support

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

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: fscholz, thatmichael85, nmve, erikadoyle, hwiechers, michaellaszlo
Ultima modifica di: fscholz,