// canvas definition standard variables
		canvas = document.getElementById('canvasArea');
		context=canvas.getContext("2d");

		// a2. layout parameters
		var xStart = 50;
		var yStart = 25;
		var xControl1 = 175;
		var yControl1 = 50;
		var xEnd = 125;
		var yEnd = 175;

		// a3 attributes of curve
		context.strokeStyle="orange";
		context.lineWidth = 7;
		context.ahadowOffsetX = 3;
		context.shadowOffsetY = 3;
		context.shadowBlur = 5;
		context.shadowColor = "gray"
		
		// a4. starting point
		context.beginPath();
		context.moveTo(xStart, yStart);

		// a5. quadratic curve.
		context.quadraticCurveTo(xControl1, yControl1, xEnd, yEnd);

		// a6 draw curve
		context.stroke();

		// a7. display control points
		displayPoint(xStart, yStart, "S");
		displayPoint(xControl1, yControl1, "1");
		displayPoint(xEnd, yEnd, "E");

		// b. display point function
		function displayPoint(xPos, yPos, text)
		{
			context.font = "10pt Arial";
			context.fillStyle="black";
			context.textAlign = "center";
			context.textBaseline = "middle;"
			context.shadowColor = "white";

			//b2 display text
			context.fillText(text, xPos, yPos);