// canvas definition standard variables
		canvas = document.getElementById('canvasArea');
		context=canvas.getContext("2d");
		
		// a2. layout of first rectangle
		var smallImage = new Image();
		smallImage.src="http://webdesign.yubacollegecompsci.com/canvas/images/Strawberry50px.png";

		// b. pattern creation
		smallImage.onload = function()
		{
			// b1. attributes
			context.shadowOffsetX = 4;
			context.shadowOffsetY = 4;
			context.shadowBlur = 10;
			context.shadowColor = "lavender";

			// b2 repeat pattern variables
			var repeatPattern = context.createPattern(smallImage,"repeat");
			var noRepeatPattern = context.createPattern(smallImage,"no-repeat");
			var repeatXPattern = context.createPattern(smallImage,"repeat-x");
			var repeatYPattern = context.createPattern(smallImage,"repeat-y");

			// b3. pattern objects
			context.fillStyle = repeatPattern;
			context.fillRect(125,125,325,325);
			context.strokeRect(125,125,325,325);
			context.fillStyle=noRepeatPattern;
			context.fillRect(0,0,100,100);
			context.strokeRect(0,0,100,100);
			context.fillStyle=repeatXPattern;
			context.fillRect(125,0,350,100);
			context.strokeRect(125,0,350,100);
			context.fillstyle=repeatYPattern;
			context.fillRect(0,125,100,350);
			context.strokeRect(0,125,100,350);
		}