// canvas definition standard variables canvas = document.getElementById('canvasArea'); context=canvas.getContext("2d"); // a2. layout paramters var xStart = 50; var yStart = 25; var xControl1 = 175; var xControl2 = 25; var yControl1 = 50; var yControl2 = 125; var xEnd = 125; var yEnd = 175; // a3. attributes of curve context.strokeStyle = "orange"; context.lineWidth = 7; context.shadowOffsetX = 3; context.shadowOffsetY = 3; context.shadowBlur = 5; context.shadowColor = "gray"; // a4. starting point context.beginPath(); context.moveTo(xStart, yStart); // a5. bezier curve context.bezierCurveTo(xControl1, yControl1, xControl2, yControl2, xEnd, yEnd); //a6 draw curve context.stroke(); // a7 display control points displayPoint(xStart, yStart, "S"); displayPoint(xControl1, yControl1, "1"); displayPoint(xControl2, yControl2, "2"); displayPoint(xEnd, yEnd, "E"); // b display point fucntion function displayPoint(xPos, yPos, text) { //b1 attributes context.font = "10pt Arial"; context.fillStyle = "black"; context.textAlign = "center"; context.textBaseline = "middle"; contgext.shadowColor = "white"; // b2 display text context.fillText(test,xPos, yPos); }