HTML Reference Manual

Complete list of HTML tags

HTML canvas arcTo() method

arcTo() is a Canvas 2D API draws an arc path based on the control point and radius, using the current stroke point (the endpoint of the previous moveTo or lineTo function, etc.). According to the current stroke point and the given control point1Connected line and control point1Connected line2The connected lines act as tangents to the circle with the specified radius, drawing an arc path between the two tangents.

HTML canvas reference manual

Online Example

Create an arc between two tangents on the canvas:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();　
ctx.moveTo(20,20);　　　　　　　　　　　//　Create the starting point
ctx.lineTo(100,20);　　　　　　　　　　//　Create a horizontal line　
ctx.arcTo(150,20,150,70,50);　//　Create an arc
ctx.lineTo(150,120);　　　　　　　　　//　Create a vertical line
ctx.stroke();　　　　　　　　　　　　　　　　//　draw it
</script>
</body>
</html>

Test and see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Definition and Usage

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

Tip:Please use stroke() Method to draw an exact arc on the canvas.

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

Parameter Value

Parameter	Description
x1	the x-coordinate of the intersection point of the two tangents.
y1	the y-coordinate of the intersection point of the two tangents.
x2	the x-coordinate of a point on the second tangent line.
y2	the y-coordinate of a point on the second tangent line.
r	the radius of the arc.

where the coordinates of any point on the first line are the position of the last point, in this example it is 100,20. By (x1,y1),(x2,y2,(100,20) Three points can determine the position of two lines, and the position of the arc is determined by the radius.

HTML canvas reference manual

HTML: <template> tag