Drawing an arc in Canvas with the arcTo method

Flyings buttress has the arcTo shape

The arcTo method defines an arc in the extension of a straight line or another figure.

The difference with the arc method is that the point of departure and arrival are not defined by an angle but by coordinates.

In fact the arcTo plot has nothing intuitive, the coordinate points are guidelines rather than exact locations, and the same figure can be obtained with different coordinates for the end point. The figure above may allow a better understanding of this operation.

arcTo has as parameters two coordinates and a radius

The method has arguments for two pairs of coordinates, x1, y1 and x2, y2 over a radius.

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

But it also depends on another point x0, y0.

These coordinates refer to the last point of the figure drawn before or the coordinates of a point given by the lineTo method called before arcTo.

arcTo therefore muse bu used with two methods:

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

or any other figure:

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

Understanding the arcTo method

Example:

The example annotated:

Source code of the demonstration:

<canvas id="canvasTo" width="400" height="400" style="border:1px dotted gray">
</canvas>
<script>
function setArcTo()
{
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();
context.beginPath();
context.lineWidth="1";
context.strokeStyle="lightGray";
context.rect(20, 20, 360, 360);
context.stroke()
}
setArcTo();
</script>

The grayed rectangle serves only to delineate the figure.

See also