Search w3schools.com:

SHARE THIS PAGE

HTML canvas arcTo() Method

HTML canvas Reference HTML Canvas Reference

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.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

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Chrome, and Safari support the arcTo() method.

Note: Opera does not support the arcTo() method.

Note: Internet Explorer 8 and earlier do not support the <canvas> element.

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 »

HTML canvas Reference HTML Canvas Reference

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]