We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API adds an arc to the path with the given control points and radius.

The arc drawn will be a part of a circle, never elliptical. Typical use could be making a rounded corner.

One way to think about the arc drawn is to imagine two straight segments, from the starting point (latest point in current path) to the first control point, and then from the first control point to the second control point. These two segments form a sharp corner with the first control point being in the corner. Using arcTo, the corner will instead be an arc with the given radius.

The arc is tangential to both segments, which can sometimes produce surprising results, e.g. if the radius given is larger than the distance between the starting point and the first control point.

If the radius specified doesn't make the arc meet the starting point (latest point in the current path), the starting point is connected to the arc with a straight line segment.


void ctx.arcTo(x1, y1, x2, y2, radius);


x-axis coordinates for the first control point.
y-axis coordinates for the first control point.
x-axis coordinates for the second control point.
y-axis coordinates for the second control point.
The arc's radius.


Using the arcTo method

This is just a simple code snippet drawing an arc. The starting point is blue and the control points are red.


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


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

ctx.moveTo(150, 20);
ctx.arcTo(150, 100, 50, 20, 30);
ctx.lineTo(50, 20)

ctx.fillStyle = 'blue';
// starting point
ctx.fillRect(150, 20, 10, 10);

ctx.fillStyle = 'red';
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);

Trying the arcTo parameters

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

<canvas id="canvas" class="playable-canvas" height="200" width="400"></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.moveTo(150, 20);
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);


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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes12 Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes

See also

Document Tags and Contributors

Contributors to this page: fscholz, thatmichael85, Ole Laursen, nmve, erikadoyle
Last updated by: fscholz,