# Canvas arcTo() Method

❮ Canvas Reference

### Example

Create an arc between two tangents on the canvas:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a path
ctx.beginPath();
ctx.moveTo(20, 20);
// Create a horizontal line
ctx.lineTo(100, 20);
// Create an arc
ctx.arcTo(150, 20, 150, 70, 50);
// Create a vertical line
ctx.lineTo(150, 120);

// Draw the path
ctx.stroke();
Try it Yourself »

More examples below.

## Description

The `arcTo()` method adds an arc/curve between two tangents to the path.

Use the `stroke()` or `fill()` method to draw the path.

The beginPath() Method (Start a new path)

The closePath() Method (Close current path)

The moveTo() Method (Move the path to a point)

The lineTo() Method (Add a line to the path)

The fill() Method (Fill current path)

The stroke() Method (Draw current path)

The arc() Method (Add a circle to the path)

The bezierCurveTo() Method (Add a curve to the path)

## Syntax

 context.arcTo(x1, y1, x2, y2, r)

## Parameter Values

Param 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 »

 NONE

## More examples

### Example

Create an arc between two tangents and fill it:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Start a path
ctx.beginPath();
ctx.moveTo(20, 20);
// Create a horizontal line
ctx.lineTo(100, 20);
// Create an arc
ctx.arcTo(150, 20, 150, 70, 50);
// Create a vertical line
ctx.lineTo(150, 120);

// Fill and draw the path
ctx.fill();
Try it Yourself »

## Browser Support

The `<canvas>` element is an HTML5 standard (2014).

`arcTo()` is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

❮ Canvas Reference
×

## Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com