Canvas Pocket Reference

Name

CRC.arcTo() — adds an arc, using two tangent lines and a radius

Synopsis

void arcTo(float x1, 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 a straight line and an arc to the current subpath and describes that arc in a way that makes it particularly useful for adding rounded corners to polygons. The arc that is added to the path is a portion of a circle with the specified radius. The arc has one point that is 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. Before adding the arc to the path, this method adds a straight line from the current point to the start point of the arc. After calling this method, the current point is at the endpoint of the arc, which lies on the line between P1 and P2.

Example

Given a context object c, you can draw a 100 × 100 square with rounded corners (of varying radii) with code like this:

c.beginPath(); c.moveTo(150, 100); // Start at the top middle c.arcTo(200,100,200,200,40); // Top edge and upper right c.arcTo(200,200,100,200,30); // Right edge and lower right c.arcTo(100,200,100,100,20); // Bottom and lower left c.arcTo(100,100,200,100,10); // Left and upper left c.closePath(); // Back to the starting point ...