// canvas definition standard variables
		canvas = document.getElementById('canvasArea');
		context=canvas.getContext("2d");
	
		// a2. attributes of shapes
		context.strokeStyle = "black";
		context.lineCap = "round";
		context.lineWidth = 4;
		context.shadowOffsetX = 3;
		context.shadowOffsetY = 3;
		context.shadowBlur = 5;
		context.shadowColor = "gray";

		//a3 shape 1
		var xPos = 50;
		var yPos = 40;
		var fLength = 20;
		var cLength = 2;
		var color="blue";
		drawShape(xPos,yPos,fLength,cLength,color);

		//a4. shape 2
		var xPos = 150;
		var yPos = 40;
		var fLength = 20;
		var cLength = 4;
		var color = "green"
		drawShape(xPos,yPos,fLength,cLength,color);

		//a5 shape 3
		var xPos = 100;
		var yPos = 125;
		var fLength = 20;
		var cLength = .5;
		var color="purple";
		drawShape(xPos, yPos, fLength, cLength,color);

		// b. draw shape function.
		function drawShape(xPos,yPos,fLength,cLength,color)
		{
			// b1. calculate short length;
			var sLength = fLength/cLength;

			// b2 path segments
			context.beginPath();
			context.moveTo(xPos-(sLength), yPos-(fLength));
			context.lineTo(xPos+(sLength),yPos-(fLength));
			context.lineTo(xPos+(fLength),yPos-(sLength));
			context.lineTo(xPos+(fLength),yPos+(sLength));
			context.lineTo(xPos+(sLength),yPos+(fLength));
			
			context.lineTo(xPos-(sLength),yPos+(fLength));
			context.lineTo(xPos-(fLength),yPos+(sLength));
			context.lineTo(xPos-(fLength),yPos-(sLength));
			context.lineTo(xPos-(sLength),yPos-(fLength));

			//b3 draw shape
			context.fillStyle = color;
			context.fill();
			context.stroke();
		}
	}