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
JavaScript
Copy Code
void <var>ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);</var>
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, iftrue
, 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
HTML
Copy Code
<canvas id="canvas"></canvas>
JavaScript
JavaScript
Copy Code
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
HTML
Copy 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>
JavaScript
Copy Code
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
HTML
Copy Code
<canvas id="canvas" width="150" height="200"></canvas>
JavaScript
JavaScript
Copy Code
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(); } } }
Screenshot | Live 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
- The interface defining it,
CanvasRenderingContext2D
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/canvasrenderingcontext2d/arc