Drawing Arcs with ArcTo

This JavaScript program demonstrates how to draw arcs with the arcTo() function on a canvas element. In this example, there six arcs drawn with the arcTo() function. With the arcTo() function the first two coordinates specify the endpoint of the vector that starts at the previous position. The second two coordinates specify the endpoint of the second vector that begins at the first two coordinates and ends at the arc endpoint that is defined by the second two coordinates. The final value specifies the radius of the arc.

The typical usage of the arcTo() function is to create a rounded corner at the ends of two line segments. In that case, the function is somewhat natural.

The first three arcs are created in such as a way to place the centers of the circles at the point (0, 100). The last three arcs extend over more than a quarter circle. The centers are shown with red dots and a black path illustrates the endpoints of the arcs and the tangent vectors.

DrawArcs.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="DrawArcs.js"></script>
  </head>
  <body onload="Draw()">
    <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

DrawArcs.js

function Draw() {
	var qCanvas = document.getElementById("idCanvas");
	var qContext2D = qCanvas.getContext("2d");

	qContext2D.strokeStyle = "red";
	qContext2D.lineWidth = "2";

    // Draw six arcs
	// Create a quarter arc:
	// (50, 50) and (100, 100) define the first tangent vector: (50, 50)
	// (100, 100)and (50, 150) define the second tangent vector: (-50, 50)
	qContext2D.beginPath();
	qContext2D.moveTo(50, 50);
	qContext2D.arcTo(100, 100, 50, 150, 70.71); // Center: (0, 100) Radius sqrt(50*50 + 50*50) = 70.71
	qContext2D.stroke();

	qContext2D.beginPath();
	qContext2D.moveTo(150, 50); // The first tangent vector: (17, 50)
	qContext2D.arcTo(167, 100, 150, 150, 158.1); // Center: (0, 100) Radius sqrt(150*150 + 50*50) = 158.1
	qContext2D.stroke();

	qContext2D.beginPath();
	qContext2D.moveTo(250, 50); // The first tangent vector: (10.25, 50)
	qContext2D.arcTo(260.25, 100, 250, 150, 254.95); // Center: (0, 100) Radius sqrt(250*250 + 50*50) = 254.95
	qContext2D.stroke();

	qContext2D.beginPath(); // The first tangent vector: (75, 50)
	qContext2D.moveTo(350, 50); // (x - 350)^2 + (y - 50)^2 = 60^2 = 3600 = (x - 350)^2 + (y - 150)^2 and y = 100 -> x  = 316.8
	qContext2D.arcTo(425, 100, 350, 150, 60); // Center: (316.8, 100) Radius 60
	qContext2D.stroke();

	qContext2D.beginPath(); // The first tangent vector: (110, 50)
	qContext2D.moveTo(450, 50); // (x - 450)^2 + (y - 50)^2 = 55^2 = 3025 and y = 100 --> x = 472.9
	qContext2D.arcTo(560, 100, 450, 150, 55); // Center: (427, 100) Radius 55
	qContext2D.stroke();

	qContext2D.beginPath(); // The first tangent vector: (+inf, 50)
	qContext2D.moveTo(550, 50); // (x - 550)^2 + (y - 50)^2 = 50^2 = 2500 and y = 100 --> x = 550
	qContext2D.arcTo(10000, 100, 550, 150, 50); // Center: (550, 100) Radius 50
	qContext2D.stroke();

	// Draw the four centers - the first three have the same center (0, 100)
	qContext2D.fillStyle = "red";
	qContext2D.beginPath();
	qContext2D.arc(0, 100, 3, 0, 2.0*Math.PI, true);
	qContext2D.fill();

	qContext2D.beginPath();
	qContext2D.arc(316.8, 100, 3, 0, 2.0*Math.PI, true);
	qContext2D.fill();

	qContext2D.beginPath();
	qContext2D.arc(427, 100, 3, 0, 2.0*Math.PI, true);
	qContext2D.fill();

	qContext2D.beginPath();
	qContext2D.arc(550, 100, 3, 0, 2.0*Math.PI, true);
	qContext2D.fill();

    // Draw the six outlines of the points for each arc
	qContext2D.strokeStyle = "black";
	qContext2D.lineWidth = ".15";
	qContext2D.beginPath();
	qContext2D.moveTo(50, 50);
	qContext2D.lineTo(100, 100);
	qContext2D.lineTo(50, 150);
	qContext2D.closePath();
	qContext2D.stroke();

	qContext2D.beginPath();
	qContext2D.moveTo(150, 50);
	qContext2D.lineTo(167, 100);
	qContext2D.lineTo(150, 150);
	qContext2D.closePath();
	qContext2D.stroke();

	qContext2D.beginPath();
	qContext2D.moveTo(250, 50);
	qContext2D.lineTo(260.25, 100);
	qContext2D.lineTo(250, 150);
	qContext2D.closePath();
	qContext2D.stroke();

	qContext2D.beginPath();
	qContext2D.moveTo(350, 50);
	qContext2D.lineTo(425, 100);
	qContext2D.lineTo(350, 150);
	qContext2D.closePath();
	qContext2D.stroke();

	qContext2D.beginPath();
	qContext2D.moveTo(450, 50);
	qContext2D.lineTo(560, 100);
	qContext2D.lineTo(450, 150);
	qContext2D.closePath();
	qContext2D.stroke();

	qContext2D.beginPath();
	qContext2D.moveTo(550, 50);
	qContext2D.lineTo(3000, 100);
	qContext2D.lineTo(550, 150);
	qContext2D.closePath();
	qContext2D.stroke();

    // Draw two lines along the endpoints of the arcs
	qContext2D.beginPath();
	qContext2D.moveTo(0, 50);
	qContext2D.lineTo(640, 50);
	qContext2D.moveTo(0, 150);
	qContext2D.lineTo(640, 150);
	qContext2D.stroke();

	qContext2D.font = "60px Times";
	qContext2D.fillStyle = "gray";
	qContext2D.fillText("Six arcs using arcTo()", 50, 250);
}

Canvas JavaScript

Drawing Arcs with ArcTo

DrawArcs.html

DrawArcs.js

Output