images sur canvas qui ne se génèrent pas

Code :
drawMapContent: function() {

this.ctx = document.getElementById(this.id).getContext("2d");

camera.constructCamera(map, this.width, this.height);



this.drawTilesMap(0, this.ctx); // je génère les tiles en background layer de la map

this.drawTilesMap(1, this.ctx); // je génère les tiles en top layer de la map



this.drawGridMap(this.ctx); // je génère la grille de la map

},



drawTilesMap: function(layer, ctx) {

var tileSize = map.getTileSize();

var startCol = Math.floor(camera.x / tileSize);

   var startRow = Math.floor(camera.y / tileSize);

   

   /*********** On empêche l'algo de créer des cases juste pour combler la vue caméra ***********/

   var endCol; var endRow;

   if (camera.width > tileSize * map.cols) endCol = startCol + map.cols - 1;

   else  endCol = startCol + (camera.width / tileSize);



   if (camera.height > tileSize * map.rows) endRow = startCol + map.rows - 1;

   else  endRow = startRow + (camera.height / tileSize);

   /*********************************************************************************************/

   

   var offsetX = -camera.x + startCol * tileSize;

   var offsetY = -camera.y + startRow * tileSize;



// on précharge l'image de tous les tiles, une fois chargée on peut commencer à drawImage()

   var imageTilesAtlas = new Image();

    imageTilesAtlas.src = this.tileAtlas;

       imageTilesAtlas.onload = function() {

   for (var c = startCol; c <= endCol; c++) {

       for (var r = startRow; r <= endRow; r++) {

           var tile = map.getTile(layer, c, r); // recupère le type de case (0, 1, 2, 3, 4, 5 ou 6)

           var x = (c - startCol) * tileSize + offsetX;

           var y = (r - startRow) * tileSize + offsetY;

           if (tile !== 0) { // 0 => empty tile

               ctx.drawImage(

                   imageTilesAtlas, // image contenant les tiles

                   (tile - 1) * tileSize, // x à partir duquel prendre l'image (pour sélectionner la bonne texture)

                   0, // y à partir duquel prendre l'image (pour sélectionner la bonne texture)

                   map.defaultTileSize, // source width

                   map.defaultTileSize, // source height

                   Math.round(x),  // target x

                   Math.round(y), // target y

                   tileSize, // target width

                   tileSize // target height

               );

           }

       }

   }

};



   camera.recenterOnMyCity();

},



drawGridMap: function (ctx) {

var tileSize = map.getTileSize();

   var width = map.cols * tileSize;

   var height = map.rows * tileSize;

   var x, y;



   ctx.strokeStyle = "rgba(100,100,100,0.3)"; // couleur et opacité du quadrillage



   for (var r = 0; r < map.rows; r++) {

       x = - camera.x;

       y = r * tileSize - camera.y;

       ctx.beginPath();

       ctx.moveTo(x, y);

       ctx.lineTo(width, y);

       ctx.stroke();

   }

   for (var c = 0; c < map.cols; c++) {

       x = c * tileSize - camera.x;

       y = - camera.y;

       ctx.beginPath();

       ctx.moveTo(x, y);

       ctx.lineTo(x, height);

       ctx.stroke();

   }

},