console.clear();

var canvas = document.getElementById('canvas');

var ctx      = canvas.getContext('2d');

var world = {

    centerY: canvas.height / 2,

    centerX: canvas.width / 2

}

var rowCount = 14;

var box = {

  width: 20,

  height: 20,

  skew: 11

}

​

function drawBox(x,y, id) {

  ctx.save();

  ctx.beginPath();

  ctx.moveTo(x,           y);

  ctx.lineTo(x+box.width, y);

  ctx.lineTo(x+box.width + box.skew +55, y - 20);

  ctx.lineTo(x+box.skew,  y - box.height);

  ctx.lineTo(x,           y );

  ctx.closePath();

  ctx.clip();

  ctx.clearRect(0,0, canvas.width, canvas.height);

  ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray';

  ctx.fill();

  ctx.restore();

}

​

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

  var k = Math.floor(i / rowCount) * rowCount; 

   console.log(k);

  drawBox( i * box.width - (k * box.width), Math.floor(i/rowCount) * box.height,i)

}