Easy Tutorial
❮ Met Canvas Translate Prop Meter Optimum ❯

HTML canvas arcTo() Method

Canvas Object

Example

Create an arc between two tangents on the canvas:

JavaScript:

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

Browser Support

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 versions do not support the <canvas> element.


Definition and Usage

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

Tip: Use the stroke() method to draw the actual arc on the canvas.

| JavaScript Syntax: | context.arcTo(x1, y1, x2, y2, r); | | --- | --- |

Parameter Values

Parameter Description
x1 The x-axis coordinate of the first control point.
y1 The y-axis coordinate of the first control point.
x2 The x-axis coordinate of the second control point.
y2 The y-axis coordinate of the second control point.
r The radius of the arc.

Canvas Object

❮ Met Canvas Translate Prop Meter Optimum ❯