Draw a Path of Various Types

This JavaScript program demonstrates how to draw a path with various types of path segments on a canvas element. The first part of the path is a circlular arc. The second part is a quadratic bezier curve. The third part is a cubic bezier curve. The fourth part is a line segment that closes the path.

DrawAndFillAPath.html

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

DrawAndFillAPath.js

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

	qContext2D.strokeStyle = "red";
	qContext2D.lineWidth = "5";
	qContext2D.fillStyle = "gray";
	qContext2D.beginPath();
	qContext2D.moveTo(300, 50);
	// Create a quarter arc:
	// (300, 50) and (500, 50) define the first tangent vector: (200, 0)
	// (500, 50)and (500, 250) define the second tangent vector: (0, 200)
	// The last 200 is the radius
	qContext2D.arcTo(500, 50, 500, 250, 200);
	// We end the arc at (500, 250), which continues to (300, 450) with (500, 450) as a control point
	// quadraticCurveTo(cx, cy, endx, endy);
	qContext2D.quadraticCurveTo(500, 450, 300, 450);
	// The quadratic curve ends at (300, 450)
	// The cubic bezier begins at (300, 450) and ends at (100, 250) with
	// bezierCurveTo(c1x, c1y, c2x, c2y, endx, endy);
	qContext2D.bezierCurveTo(50, 450, 50, 350, 100, 250);
	// A last line closes the path from (100, 250) back to (300, 50)
	qContext2D.closePath();
	qContext2D.fill();
	qContext2D.stroke();

	// Draw lines to illustrate the control points
	qContext2D.beginPath();
	qContext2D.strokeStyle = "black";
	qContext2D.lineWidth = ".5";
	qContext2D.moveTo(300, 50);
	qContext2D.lineTo(500, 50);
	qContext2D.lineTo(500, 250);
	qContext2D.lineTo(500, 450);
	qContext2D.lineTo(300, 450);
	qContext2D.lineTo(50, 450);
	qContext2D.lineTo(50, 350);
	qContext2D.lineTo(100, 250);
	qContext2D.closePath();
	qContext2D.stroke();

	// Draw the endpoints of each curve
	qContext2D.fillStyle = "black";
	qContext2D.beginPath();
	qContext2D.arc(300, 50, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();
	qContext2D.beginPath();
	qContext2D.arc(500, 250, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();
	qContext2D.beginPath();
	qContext2D.arc(300, 450, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();
	qContext2D.beginPath();
	qContext2D.arc(100, 250, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();

	// Draw the arc control point
	qContext2D.fillStyle = "purple";
	qContext2D.beginPath();
	qContext2D.arc(500, 50, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();
	// Draw the quadratic bezier control point
	qContext2D.fillStyle = "green";
	qContext2D.beginPath();
	qContext2D.arc(500, 450, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();
	// Draw the cubic bezier control points
	qContext2D.fillStyle = "blue";
	qContext2D.beginPath();
	qContext2D.arc(50, 450, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();
	qContext2D.beginPath();
	qContext2D.arc(50, 350, 5, 0, 2.0*Math.PI, true);
	qContext2D.fill();

	// Labels
	qContext2D.font = "60px Times";
	qContext2D.fillStyle = "white";
	qContext2D.fillText("Arc", 350, 150);
	qContext2D.fillText("Quad", 330, 370);
	qContext2D.fillText("Cubic", 100, 370);
	qContext2D.fillText("Line", 180, 220);

}

Canvas JavaScript

Draw a Path of Various Types

DrawAndFillAPath.html

DrawAndFillAPath.js

Output