Draw an arc on the canvas using arcTo

The arcTo method defines an arc as an extension of a straight line or other shape.

The difference from the arc method is that the start and end points are determined not by angle, but by coordinates.

In fact, drawing arcTo is not intuitive; coordinate points are directions, not exact locations, and the same shape can be obtained with different coordinates for the endpoint. The graphic above may help you better understand this.

arcTo has two coordinates and a radius as arguments

The method has two pairs of coordinates, x1, y1, and x2, y2, plus radius, as arguments.

arcTo(x1, y1, x2, y2, radius)

But it also depends on another point, x0, y0, which is not specified in the instruction. These implicit coordinates are either the coordinates of the last point of the previously drawn figure, or the coordinates of this point by calling the lineTo method before calling arcTo.

Therefore, arcTo can be used with two methods:

lineTo(x0, y0);
arcTo(x1, y1, x2, y2, radius)

or with any other form:

rect(x, y, width, height)
arcTo(x1, y1, x2, y2, radius)

Understanding arcTo

Method

Point
• must first be placed using a method such as lineTo, moveTo, or another canvas method that draws a shape.
• When the shape is just drawn, the last point of the shape is taken as the arcTo starting point.
• The image generated by arcTo depends on this point x0, y0 and the arguments given to it.
• Imagine a circle whose radius is specified by the radius parameter of the arcTo method.
• The first tangent to this circle follows the line from x0, y0 to x1, y1.
• The second tangent to this circle passes through x1, y1, and x2, y2.

Example:

The same example is annotated:

• x0 =
20
• y0 =
20
• x1 = 380
• y1 =
20
• x2 = 380
• y2 = 380

Demo Source:

<canvas id="canvasTo" width="400" height="400" style="border:1px dotted gray">
</canvas>

<script>
 var canvas = document.getElementById("canvasTo"); 
 var context = canvas.getContext("2d");
 context.beginPath();
 context.lineWidth="3";
 context.strokeStyle="green";
 context.moveTo(20, 20);
 context.arcTo(380, 20, 380, 380, 50);
 context.stroke();
</script>

See also

• Holst arch method.