<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start here

for (var i=0; i<7; i++) { // COLUMNS
	for (var j=0; j<7; j++) { // ROWS

//// DEFINE VARIABLES

		var x = 20 + i*51;
		var y = 20 + j*51;
		
		var w = 50;
		var h = 50;
		
		var tx = w/2;
		var ty = h/2;
		
		var rx = - tx;
		var ry = - ty;
		
		var a = Math.PI / 4 + i+j ;
		
// CREATE THE SQUARE
		square(x,y,w,h,tx,ty,rx,ry,a);

	}
}

	function square(x,y,w,h,tx,ty,rx,ry,a) {

	// POP
		context.save(); 

	///// GEOMETRIC TRANSFORMATIONS

	//// FIRST TRANSLATE TO TOP LEFT CORNER OF SQUARE
	//// these are the new (0,0) coordinates

		context.translate(x, y);

	//// THEN TRANSLATE TO CENTER OF SQUARE

		context.translate(tx, ty); // NEW (0,0);

	//// THEN ROTATE

		context.rotate(a);

	// WE ARE ROTATING USING CENTER OF SQUARE AS AXIS

	///// COLOR STYLES

		var grd = context.createLinearGradient(rx,ry,rx+w,ry+h);
		grd.addColorStop(0.1, "red");
		grd.addColorStop(0.5, "cyan");
		grd.addColorStop(0.9, "black");
		context.fillStyle = grd;
		context.fill();
		context.fillRect(rx,ry,w,h);

	// PUSH
		context.restore(); 

	} // END OF FUNCTION
////////////////////////////////////// end here
}
</script>