Canvas arcTo(): Draw Tangent Arcs and Rounded Corners
arcTo(x1, y1, x2, y2, radius) adds a circular arc that is tangent to two lines defined by the current point and two control points. It is especially useful for rounded path corners.
The arc normally does not pass through either control point. Canvas calculates tangent points from the geometry and radius.
arcTo() syntax Top ↑
ctx.beginPath();
ctx.moveTo(120, 30);
ctx.arcTo(260, 30, 260, 180, 70);
ctx.stroke();| Parameter | Meaning |
|---|---|
x1, y1 | First control point |
x2, y2 | Second control point |
radius | Non-negative arc radius |
Visualizing the tangent arc Top ↑
Important arcTo() behavior Top ↑
- The current path point acts as the starting geometry point, so set it explicitly with
moveTo(). - If necessary, Canvas adds a straight line from the current point to the beginning of the arc.
- A radius of
0produces line-like behavior. - A negative radius throws an
IndexSizeError. - A very large radius can create a long connecting segment, so choose radii that fit the corner geometry.
Rounded corner example Top ↑
ctx.beginPath();
ctx.moveTo(40, 40);
ctx.lineTo(180, 40);
ctx.arcTo(220, 40, 220, 80, 40);
ctx.lineTo(220, 160);
ctx.stroke();For simple rounded rectangles, modern Canvas also provides roundRect(), but arcTo() remains useful when building custom paths.
Frequently asked questions Top ↑
What is arcTo() used for? Top ↑
It is commonly used to create tangent arcs and rounded corners inside custom Canvas paths.
Does arcTo() draw through the control point? Top ↑
Usually no. The control points define the tangent geometry; the calculated arc touches the two tangent lines.
Can the radius be negative? Top ↑
No. A negative radius raises an IndexSizeError.
Do I need moveTo() before arcTo()? Top ↑
Using moveTo() is the clearest way to establish the current starting point before the tangent arc is calculated.
What is the difference between arc() and arcTo()? Top ↑
arc() draws around a specified center and angles. arcTo() calculates a tangent arc from the current path and two control points.
Related Canvas tutorials Top ↑
arc() | moveTo() | lineTo() | quadraticCurveTo() | Canvas tutorial
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
