THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas arcTo() Method

❮ Canvas Object

Example

Create an arc between two tangents on the canvas:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

Browser Support

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

Method
arcTo() 4.0 9.0 3.6 4.0 Not supported

Definition and Usage

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

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

JavaScript syntax: context.arcTo(x1, y1, x2, y2, r);

Parameter Values

Parameter Description Play it
x1 The x-coordinate of the beginning of the arc Play it »
y1 The y-coordinate of the beginning of the arc Play it »
x2 The x-coordinate of the end of the arc Play it »
y2 The y-coordinate of the end of the arc Play it »
r The radius of the arc Play it »

❮ Canvas Object