HTML canvas arcTo() Method

Introduction

Create an arc between two tangents on the canvas:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="180" 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();/*  w ww  . j av a  2s .co m*/
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>

The arcTo() method creates an arc/curve between two tangents on the canvas.

Use the stroke() method to actually draw the arc on the canvas.

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

Parameter Values

Parameter	Description
x1	The x-coordinate of the beginning of the arc
y1	The y-coordinate of the beginning of the arc
x2	The x-coordinate of the end of the arc
y2	The y-coordinate of the end of the arc
r	The radius of the arc

Previous Next

HTML canvas arcTo() Method

Introduction

Related