JavaScript: The Definitive Guide, 5th Edition

Name

CanvasRenderingContext2D.arcTo( ): add an arc of a circle to the current subpath, using tangent points and a radius

Synopsis

void arcTo(floatx1, float y1, float x2, float y2, float radius)

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 ...