MODULAR

var xx = x%2; // is x a multiple of 2?
var yy = y%2; // is y a multiple of 2?


if ( xx == yy ) { c = "pink"; } else { c = "blue"; }



Use fillRect() instead of fill()

var dX = mouseX - x*w;
var dY = mouseY - y*h;
var D = Math.sqrt( dX*dX + dY*dY ) / 50;


context.save();
context.translate(x*w,y*h);
context.rotate(D);
context.fillRect(-w/2,-h/2,w,h);
context.restore();