Easy Tutorial
❮ Ev Ondblclick Att Meta Charset ❯

HTML canvas arcTo() Method

HTML canvas Reference

Example

Create an arc between two tangents on the canvas:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);           // Create starting point
ctx.lineTo(100, 20);          // Create horizontal line
ctx.arcTo(150, 20, 150, 70, 50); // Create arc
ctx.lineTo(150, 120);         // Create vertical line
ctx.stroke();                // Draw it

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
arcTo() Yes 9.0 Yes Yes No

Definition and Usage

The arcTo() method creates an arc/curve between two tangents on the canvas.

Tip: Use the stroke() method to draw the actual arc on the canvas.

| JavaScript Syntax: | context.arcTo(x1, y1, x2, y2, r); | | --- | --- |

Parameter Values

Parameter Description
x1 The x-coordinate of the intersection of the two tangents.
y1 The y-coordinate of the intersection of the two tangents.
x2 The x-coordinate of a point on the second tangent.
y2 The y-coordinate of a point on the second tangent.
r The radius of the arc.

The coordinates of any point on the first line are the position of the last point, which in this example is 100, 20. The positions of the points (x1, y1), (x2, y2), and (100, 20) determine the positions of the two lines, and the radius determines the position of the arc.

❮ Ev Ondblclick Att Meta Charset ❯