// canvas definition standard variables
		canvas = document.getElementById('canvasArea');
		context=canvas.getContext("2d");
		
		// a2. layout of first rectangle
		var xPos = 20;
		var yPos = 20;
		var gap = 20;
		var width = 80;
		var height = 80;

		// a3 attributes

		// a3. display rectangles
		context.shadowOffsetX = 4;
		context.ahdowOffsetY = 4;
		context.shadowBlur = 3;
		context.shadowColor = "gray";
		context.lineWidth = 4;

		// a4. linear horizontal gradient
		var gradLH = context.createLinearGradient(
			20,		// start x
			0,		// start y
			100,		// end x
			0);		// end y

		// a5. linear vertical gradient
		var gradLV = context.createLinearGradient(
			0,		// start x
			0,		// start y
			0,		// end y
			100);		// end y
		
		// a6. linear diagonal gradient
		var gradLD = context.createLinearGradient(
			xPos+(2*width)+(2*gap),	//start x
			yPos,			// start y
			xPos+220+width,		// end x
			yPos+height);		// end y

		// a7. centered radial gradient
		var gradRC = context.createRadialGradient(
			xPos + (3*width)+(3*gap)+(width/2),	// inner circle x
			yPos + (height/2),			// inner circl y6
			5,					// inner circle radius
			xPos +(3*width)+(3*gap)+(width/2),	// outer circle x
			yPos+(height/2),			//outter circle y
			50);					// outer circle rdius

		// a8. offset radial gradient
		var gradR0 = context.createRadialGradient(
			xPos+(4*width)+(4*gap)+(width/4),	// inner circle x
			yPos+(height/2),			// inner circle y
			15,					// inner circle radius
			xPos+(4*width)+(4*gap)+(width/2),	// outer circle x
			yPos+(height/2),			// outer circl y
			40);					//outer circle radius

		// a9 colors
		gradLH.addColorStop(0,"deeppink");
		gradLH.addColorStop(.3,"orange");
		gradLH.addColorStop(.6, "lime");
		gradLH.addColorStop(1,"yellow");

		gradLV.addColorStop(0,"red");
		gradLV.addColorStop(.4,"blueviolet");
		gradLV.addColorStop(1,"gold");

		gradLD.addColorStop(0,"fuchsia");
		gradLD.addColorStop(.5,"orange");
		gradLD.addColorStop(1,"springgreen");

		gradRC.addColorStop(0,"red");
		gradRC.addColorStop(.5,"turquoise");
		gradRC.addColorStop(1,"olive");

		gradR0.addColorStop(0,"yellow");
		gradR0.addColorStop(.7,"magenta");
		gradR0.addColorStop(1,"limegreen");

		// a10 linear gradient objects
		context.fillStyle = gradLH;
		context.fillRect(xPos+(0*width)+(0*gap),yPos, width, height);

		context.fillStyle = gradLV;
		context.fillRect(xPos+(1*width)+(1*gap),yPos,width,height);
		
		context.fillStyle = gradLD;
		context.fillRect(xPos+(2*width)+(2*gap), yPos, width, height);
		context.strokeStyle=gradLD;
		context.beginPath();
		context.moveTo(xPos,yPos+height+gap);
		context.lineTo(xPos+(5*width)+(4*gap),yPos+height+gap);
		context.stroke();

		// a11. radial gradient objects
		context.fillStyle=gradRC;
		context.fillRect(xPos+(3*width)+(3*gap),yPos, width, height);
		context.fillStyle=gradR0;
		context.fillRect(xPos+(4*width)+(4*gap),yPos,width,height);