ArcTo

arcTo is a method of the Canvas 2D API, specifically CanvasRenderingContext2D.arcTo, used to add a circular arc to the current path. It is commonly employed to create rounded corners between line segments when drawing shapes on an HTML5 canvas.

The function takes five parameters: x1, y1, x2, y2, and radius. It adds a circular arc with the given radius that is tangent to two lines: one from the current point to the point (x1, y1) and another from (x1, y1) to (x2, y2). The arc connects from the current point to a point along the line toward (x2, y2), forming a smooth corner. After the arc is added, the current drawing position becomes the arc’s endpoint on that second line. If a valid arc cannot be drawn—for example when radius is zero, the current point equals (x1, y1), or there isn’t enough space to accommodate the radius—the function draws a straight line to (x1, y1) and sets the current point there.

Usage notes: arcTo does not move the starting point by itself; it relies on a prior moveTo or lineTo to establish the current point. It is particularly useful for constructing rounded corners in complex paths with multiple straight segments. While widely supported in modern browsers, its behavior can be sensitive to the relative positions of the points and the specified radius, so testing is recommended when designing dynamic paths. See also lineTo, arc, and other path construction methods in the Canvas API.