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

		// a2. layout of first object
		var xPos = 20;
		var yPos = 20;
		var gap = -20;
		var width = 80;
		var height = 80;

		// a3. shadow attributes
		context.shadowOffsetX = 4;
		context.shadowOffsetY = 4;
		context.shadowBlur = 3;
		context.shadowColor = "gray";

		// a4. objects with global alpha
		context.globalAlpha = 1;
		context.fillStyle = "orange";
		context.fillRect(xPos+(0*width)+(0*gap),yPos, width, height);
		context.globalAlpha = .5;
		context.fillStyle="blue";
		context.fillRect(xPos+(1*width)+(1*gap),yPos,width,height);
		context.globalAlpha=.25;
		context.fillStyle="red";
		context.fillRect(xPos+(2*width)+(2*gap),yPos,width,height);
		context.globalAlpha=.25
		context.fillStyle="limegreen";
		context.fillRect(xPos+(3*width)+(3*gap),yPos,width,height);
		context.globalAlpha=.4;
		context.fillStyle="magenta";
		context.fillRect(xPos+(4*width)+(4*gap),yPos,width,height);
		context.globalAlpha=.25
		context.fillStyle="gold";
		context.fillRect(xPos+(5*width)+(5*gap),yPos,width,height);
		context.globalAlpha = .4;
		context.fillStyle="turquoise";
		context.fillRect(xPos+(6*width)+(6*gap),yPos,width,height);