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.
<!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>
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); }
© 20072025 XoaX.net LLC. All rights reserved.