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.
Syntax
void ctx.arcTo(x1, y1, x2, y2, radius);
Parameters
x1
- x-axis coordinates for the first control point.
y1
- y-axis coordinates for the first control point.
x2
- x-axis coordinates for the second control point.
y2
- y-axis coordinates for the second control point.
radius
- The arc's radius.
Examples
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.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(150, 20); ctx.arcTo(150, 100, 50, 20, 30); ctx.lineTo(50, 20) ctx.stroke(); 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:
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.arcTo' in that specification. |
Living Standard |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
See also
- The interface defining it,
CanvasRenderingContext2D