arcTo() - Javascript Canvas Reference

Javascript examples for Canvas Reference:arcTo


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
x1The x-coordinate of the beginning of the arc
y1The y-coordinate of the beginning of the arc
x2The x-coordinate of the end of the arc
y2The y-coordinate of the end of the arc
r The radius of the arc


Create an arc between two tangents on the canvas:

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();//from w w w  .  j  av  a  2s  .  c  om
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



Related Tutorials