<script>

  window.onload = function() {


  var canvas = document.getElementById("myCanvas");

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


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


for (var i=0; i<50; i++) {


  //// DEFINE VARIABLES

  var x = i*10;
  var y = 50;

  var w = 20+i;
  var h = 20+i;

  var tx = w/2;
  var ty = h/2;

  var rx = - tx;
  var ry = - ty;

  var a = Math.PI / 4 + i ;

  // CREATE THE SQUARE

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

}


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


  context.save(); // POP


///// 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);


context.restore(); // PUSH


} // END OF FUNCTION


////////////////////////////////////// end here


};


</script>