THE INDIA LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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

Canvas arcto() diagram

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 first tangent Play it »
y1 The y-coordinate of the first tangent Play it »
x2 The x-coordinate of the second tangent Play it »
y2 The y-coordinate of the second tangent Play it »
r The radius of the arc Play it »

HTML canvas Reference HTML Canvas Reference