arcTo() - Javascript Canvas Reference

Javascript examples for Canvas Reference:arcTo

  1. HOME
  2. Javascript
  3. Canvas Reference
  4. arcTo

Description

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

Example

Create an arc between two tangents on the canvas:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

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

<script>

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

</script>

</body>
</html>

Related Tutorials