Отображение тайловой карты в Javascript

Вот код, который я сейчас использую, чтобы попытаться сгенерировать тайловую карту:

// --- Javascript ---

window.onload = function (){
  var can = document.getElementById("canvas");
  var ctx = can.getContext('2d');
  var map = {
  cols: 8, //# of cols
  rows: 8, // # of rows
  tSize: 32, // tile size (32px x 32px)
  tiles: [
    [1, 1, 1, 1 ,1 ,1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 1]
  ], // map
};

var tileAtlas = new Image();
tileAtlas.src = 'Tiles.png';
tileAtlas.onload = function () {
  for (var c = 0; c < map.cols; c++) {
    for (var r = 0; r < map.rows; r++) {
      if (map.tiles[c][r] !== 0) { // 0 is an empty tile
        ctx.drawImage(
          tileAtlas, // image
          map.tiles[c][r] * 32, // cut start x
          0, // cut start y
          map.tsize, // size of tiles for cut size x
          map.tsize, // size of tiles for cut size y
          c * map.tsize, // place tiles on canvas x
          r * map.tsize, // place tiles on canvas y
          map.tsize, // place height
          map.tsize // place width
        );
      }
    }
  }
}
}

вот спрайт лист

Он должен был показывать сетку «травы» 8x8, но она была пустой, но консоль была чистой.