// canvas definition standard variables
		canvas = document.getElementById('canvasArea');
		context=canvas.getContext("2d");
	
		// a2. text variables
		var width = 60;
		var height = 75;
		var gap = 50;

		// a3. attributes of lines
		context.strokeStyle="red";
		context.lineWidth = 20;
		context.shadowOffsetX = 4;
		context.shadowOffsetY = 4;
		context.shadowBlur = 7;
		context.shadowColor = "gray";

		// a4 draw lines
		//	xStart yStart cap
		//
		drawLine(25,25,"butt");
		drawLine(25,75,"square");
		drawLine(25,125,"round");

		// a5. draw joins
		// xStart		yStart join
		drawJoin(175+(0*gap)+(0*width),120, "miter");
		drawJoin(175+(1*gap)+(1*width),120, "bevel");
		drawJoin(175+(2*gap)+(2*width),120, "round");

		// b. line drawing function
		function drawLine(xStart, yStart, cap)
		{
			//b1. attributes of lines
			context.lineCap = cap;

			// b2. draw lines;
			context.beginPath();
			context.moveTo(xStart, yStart);
			context.lineTo(xStart+1.5*width,yStart);
			context.stroke();
		}

		// c. line joining function
		function drawJoin(xStart,yStart,join)
		{
			//c1 attributes of line
			context.lineCap = "round";

			//c2 draw lines
			context.beginPath();
			context.moveTo(xStart, yStart);
			context.lineTo(xStart+(width/2),yStart-height);
			context.lineTo(xStart+width,yStart);
			context.lineJoin = join;
			context.stroke();
		}
			
	}