Name
CanvasRenderingContext2D.arcTo( ): add an arc of a circle to the current subpath, using tangent points and a radius
Synopsis
void arcTo(floatx1
, floaty1
, floatx2
, floaty2
, floatradius
)
Arguments
-
x1, y1
The coordinates of point P1.
-
x2, y2
The coordinates of point P2.
-
radius
The radius of the circle that defines the arc.
Description
This method adds an arc to the current subpath but describes
that arc much differently than the arc(
)
method does. The arc that is added to the path is a
portion of a circle with the specified
radius
. The arc has one point tangent to
the line from the current position to P1 and one point that is
tangent to the line from P1 to P2. The arc begins and ends at these
two tangent points and is drawn in the direction that connects those
two points with the shortest arc.
In many common uses, the arc begins at the current position and ends at P2, but this is not always the case. If the current position is not the same as the starting point of the arc, this method adds a straight line from the current position to the start position of the arc. This method always leaves the current position set to the end point of the arc.
Example
You could draw the upper-right corner of a rectangle, giving it a rounded corner with code like the following:
c.moveTo(10,10); // start at upper left c.lineTo(90, 10) // horizontal line to start of round corner c.arcTo(100, 10, 100, 20, 10); // rounded corner c.lineTo(100, 100); // vertical line down to lower right
Bugs
This method is not ...
Get JavaScript: The Definitive Guide, 5th Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.