Canvas arcTo() Method

Canvas Reference Manual

Definition and usage

arcTo() Method to create an arc/curve between two tangents on the canvas.

Hint:Please use stroke() Method to draw an exact arc on the canvas.

Example

Create an arc between two tangents on the canvas:

Your browser does not support the HTML5 canvas tag.

JavaScript:

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

Try it yourself

Syntax

context.fillRect(x1,y1,x2,y2,r);

Parameter value

Parameter Description
x1 The x-coordinate of the starting point of the arc
y1 The y-coordinate of the starting point of the arc
x2 The x-coordinate of the endpoint of the arc
y2 The y-coordinate of the end point of the arc
r Radius of the arc

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

Canvas Reference Manual