// canvas definition standard variables

		//a1. draw individual shapes examples
		drawShapes("source-over");
		drawShapes("source-in");
		drawShapes("source-out");
		drawShapes("source-atop");
		drawShapes("destination-over");
		drawShapes("destionation-in");
		drawShapes("destination-out");
		drawShapes("destination-atop");
		drawShapes("lighter");
		drawShapes("copy");
		drawShapes("xor");

		//b draw function
		function drawShapes(type)
		{
			// b1 canvas id
			canvas = document.getElementById(type);
			context = canvas.getContext("2d");

			//b2 variables
			var squareOffset = 15;
			var squareSide = 70;
			var circleOffset = 73;
			var circleRadius = 35;

			// b3 squarte
			context.fillStyle = "blue";
			context.fillRect(squareOffset, squareOffset, squareSide, squareSide);

			//b4 composite attribute
			context.globalCompositeOperation = type;

			// b5. circle
			context.fillStyle = "red"
			context.beginPath();
			context.arc(circleOffset, circleOffset, circleRadius, 0, Math.PI*2, true);
			context.fill();
		}