arcTo method

  • Article

Draws an arc of a fixed radius between two tangents that are defined by the current point in a path and two additional points.

 

Syntax

object.arcTo(x1, y1, x2, y2, radius);

Parameters

  • x1 [in]
    Type: number

    The x-coordinate for the first tangent that intersects with the current path point.

  • y1 [in]
    Type: number

    The y-coordinate for the first tangent that intersects with the current point.

  • x2 [in]
    Type: number

    The x-coordinate for the second tangent that intersects with the x1 and y1 points.

  • y2 [in]
    Type: number

    The y-coordinate for the second tangent that intersects with the x1 and y1 points.

  • radius [in]
    Type: number

    The radius of the arc to create.

Return value

This method does not return a value.

Exceptions

Exception Condition
IndexSizeError

The radius given is negative.

 

Standards information

Remarks

The ICanvasRenderingContext2D::arcTo method creates an arc of radius radius between two tangents. The first tangent is defined by an imaginary line that is drawn through the last point in a path and the point (x1, y1). The second tangent is defined by an imaginary line that is drawn through the point (x1, y1) and the point (x2, y2).

The arc is drawn between the two tangents using radius as the radius. ArcTo will draw a straight line from the last point of the path to the start of the arc which lies on the tangent that contains the last point on the path and x1 and y1.

When ICanvasRenderingContext2D::arcTo draws an arc, it tries to fit the arc between the two tangents. The following illustration shows two graphics. Both graphics create a path, and both draw horizontal and vertical lines and use the same parameters for ICanvasRenderingContext2D::arcTo. However, the second graphic moves the last point on the path down by 20 pixels, which changes the angle between the two tangents. In the first graphic, the values make the arc complete a rounded corner.

In the second example, because the angle of the intersecting tangents is narrower, arcTo needs to move the fixed radius arc to a point where it fits.

See also

ICanvasRenderingContext2D::arc

ICanvasRenderingContext2D::translate

ICanvasRenderingContext2D::moveTo