How would I add a second row in a tile map?

Question

How would I add a second row in a tile map, how would I move the tile that it prints from the image down? say I have a row 0f ten columns of tiles I am trying to get the second row of tiles please help me my code will be below I am new-Ish to this Ive tired creating multiple atlases but that hasn't worked. This site wont let me post if i dont write a certain amount though

        // tiles 3,5 and 6 are solid -- the rest are walkable
        // loop through all layers and return TRUE if any tile is solid
        return this.layers.reduce(function (res, layer, index) {
            var tile = this.getTile(index, col, row);
            var isSolid = tile === 3 || tile === 5 || tile === 6;
            return res || isSolid;
        }.bind(this), false);
    },
    getCol: function (x) {
        return Math.floor(x / this.tsize);
    },
    getRow: function (y) {
        return Math.floor(y / this.tsize);
    },
    getX: function (col) {
        return col * this.tsize;
    },
    getY: function (row) {
        return row * this.tsize;
    }
};





function Camera(map, width, height) {
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.maxX = map.cols * map.tsize - width;
    this.maxY = map.rows * map.tsize - height;
}

Camera.prototype.follow = function (sprite) {
    this.following = sprite;
    sprite.screenX = 0;
    sprite.screenY = 0;
};

Camera.prototype.update = function () {
    // assume followed sprite should be placed at the center of the screen
    // whenever possible
    this.following.screenX = this.width / 2;
    this.following.screenY = this.height / 2;

    // make the camera follow the sprite
    this.x = this.following.x - this.width / 2;
    this.y = this.following.y - this.height / 2;
    // clamp values
    this.x = Math.max(0, Math.min(this.x, this.maxX));
    this.y = Math.max(0, Math.min(this.y, this.maxY));

    // in map corners, the sprite cannot be placed in the center of the screen
    // and we have to change its screen coordinates

    // left and right sides
    if (this.following.x < this.width / 2 ||
        this.following.x > this.maxX + this.width / 2) {
        this.following.screenX = this.following.x - this.x;
    }
    // top and bottom sides
    if (this.following.y < this.height / 2 ||
        this.following.y > this.maxY + this.height / 2) {
        this.following.screenY = this.following.y - this.y;
    }
};

var Loader = {
    images: {}
};

Loader.loadImage = function (key, src) {
    var img = new Image();

    var d = new Promise(function (resolve, reject) {
        img.onload = function () {
            this.images[key] = img;
            resolve(img);
        }.bind(this);

        img.onerror = function () {
            reject('Could not load image: ' + src);
        };
    }.bind(this));

    img.src = src;
    return d;
};

Loader.getImage = function (key) {
    return (key in this.images) ? this.images[key] : null;
};

function Hero(map, x, y) {
    this.map = map;
    this.x = x;
    this.y = y;
    this.width = map.tsize;
    this.height = map.tsize;
    this.boatLevel = 0;
    this.image = herostate;
}





Hero.SPEED = 256; // pixels per second

Hero.prototype.move = function (delta, dirx, diry) {
    // move hero
    this.x += dirx * Hero.SPEED * delta;
    this.y += diry * Hero.SPEED * delta;
    
    // check if we walked into a non-walkable tile
    this._collide(dirx, diry);

    // clamp values
    var maxX = this.map.cols * this.map.tsize;
    var maxY = this.map.rows * this.map.tsize;
    this.x = Math.max(0, Math.min(this.x, maxX));
    this.y = Math.max(0, Math.min(this.y, maxY));
};

Hero.prototype._collide = function (dirx, diry) {
    var row, col;
    // -1 in right and bottom is because image ranges from 0..63
    // and not up to 64
    var left = this.x - this.width / 2;
    var right = this.x + this.width / 2 - 1;
    var top = this.y - this.height / 2;
    var bottom = this.y + this.height / 2 - 1;

    // check for collisions on sprite sides
    var collision =
        this.map.isSolidTileAtXY(left, top) ||
        this.map.isSolidTileAtXY(right, top) ||
        this.map.isSolidTileAtXY(right, bottom) ||
        this.map.isSolidTileAtXY(left, bottom);
    if (!collision) { return; }

    if (diry > 0) {
        row = this.map.getRow(bottom);
        this.y = -this.height / 2 + this.map.getY(row);
    }
    else if (diry < 0) {
        row = this.map.getRow(top);
        this.y = this.height / 2 + this.map.getY(row + 1);
    }
    else if (dirx > 0) {
        col = this.map.getCol(right);
        this.x = -this.width / 2 + this.map.getX(col);
    }
    else if (dirx < 0) {
        col = this.map.getCol(left);
        this.x = this.width / 2 + this.map.getX(col + 1);
    }
};
var Game = {};

Game.run = function (context) {
    this.ctx = context;
    this._previousElapsed = 0;

    var p = this.load();
    Promise.all(p).then(function (loaded) {
        this.init();
        window.requestAnimationFrame(this.tick);
    }.bind(this));
};
Game.load = function () {
         
        return [
            Loader.loadImage('tiles', './assets/tiles.png'),
            Loader.loadImage('tiles2', './assets/tiles2.png'),
            Loader.loadImage('heroLEFT', './assets/boat-left.png'),
            Loader.loadImage('heroRIGHT', './assets/boat-right.png'),
            Loader.loadImage('heroUP', './assets/boat-up.png'),
            Loader.loadImage('heroDOWN', './assets/boat-down.png')
        ];

};

var test = herostate;



Game.init = function () {
   
    Keyboard.listenForEvents(
        [Keyboard.LEFT, Keyboard.RIGHT, Keyboard.UP, Keyboard.DOWN]);
    // Define the tileset data structure
    this.tileAtlas = Loader.getImage("tiles");
    this.tileAtlas2 = Loader.getImage("tiles2");
    this.hero = new Hero(map, 160, 160);
    this.camera = new Camera(map, 1152, 1152);
    this.camera.follow(this.hero);
};
var splashScreen = document.querySelector('.splash');
splashScreen.addEventListener('click', () => {
    var context = document.getElementById('mycanvas').getContext('2d');
    let fontface = new FontFace("Story-MainFont", "url(./assets/fonts/Mainfont.otf)")
    fontface.load().then(() => {
        // Ready to use the font in a canvas context
    });
    splashScreen.style.opacity = 0;
    Game.run(context);
    setTimeout(() => {
        splashScreen.classList.add('hidden')
        
    }, 610)
})
Game.update = function (delta) {
    
        // handle hero movement with arrow keys
        var dirx = 0;
        var diry = 0;

        if (Keyboard.isDown(Keyboard.LEFT)) { dirx = -1; herostate = "./assets/heroLEFT.png"; }
        else if (Keyboard.isDown(Keyboard.RIGHT)) { dirx = 1; herostate = "./assets/heroRIGHT.png"; }
        else if (Keyboard.isDown(Keyboard.UP)) { diry = -1; herostate = "./assets/heroUP.png";    }
        else if (Keyboard.isDown(Keyboard.DOWN)) { diry = 1; herostate =       "./assets/heroDOWN.png"; }

        this.charstate = new Image();
        this.charstate.src = herostate;
        this.hero.move(delta, dirx, diry);
        this.camera.update();
        
};

Game._drawLayer = function (layer) {
    
        var startCol = Math.floor(this.camera.x / map.tsize);
        var endCol = startCol + (this.camera.width / map.tsize);
        var startRow = Math.floor(this.camera.y / map.tsize);
        var endRow = startRow + (this.camera.height / map.tsize);
        var offsetX = -this.camera.x + startCol * map.tsize;
        var offsetY = -this.camera.y + startRow * map.tsize;

    for (var c = startCol; c <= endCol; c++) {
        for (var r = startRow; r <= endRow; r++) {
            var tile = map.getTile(layer, c, r);
            var x = (c - startCol) * map.tsize + offsetX;
            var y = (r - startRow) * map.tsize + offsetY;
            if (tile !== 0 && tile <= 10) { // 0 => empty tile
                this.ctx.drawImage(
                    this.tileAtlas, // image
                    (tile - 1) * map.tsize, // source x
                    0, // source y
                    map.tsize, // source width
                    map.tsize, // source height
                    Math.round(x),  // target x
                    Math.round(y), // target y
                    map.tsize, // target width
                    map.tsize // target height
                );
            }
            else {
                if (tile !== 0 && tile >= 10 && tile <= 20) {
                    console.log();
                    this.ctx.drawImage(
                        this.tileAtlas, // image
                        (tile - 1) * map.tsize, // source x
                        64, // source y
                        map.tsize, // source width
                        map.tsize, // source height
                         c * map.tsize,  // target x
                         r * map.tsize, // target y
                        map.tsize, // target width
                        map.tsize // target height
                    );
                }
            }
        }
    }
   };
   Game.tick = function (elapsed) {
    
        window.requestAnimationFrame(this.tick);

        // clear previous frame
        this.ctx.clearRect(0, 0, 512, 512);

        // compute delta time in seconds -- also cap it
        var delta = (elapsed - this._previousElapsed) / 1000.0;
        delta = Math.min(delta, 0.25); // maximum delta of 250 ms
        this._previousElapsed = elapsed;

        this.update(delta);
        this.render();

    }.bind(Game);



   Game.render = function () {
    
        // draw map background layer
        this._drawLayer(0);

        // draw main character

        this.ctx.drawImage(
            this.charstate,
            this.hero.screenX - this.hero.width / 2,
            this.hero.screenY - this.hero.height / 2);

        // draw map top layer
        this._drawLayer(1);

        

        
   };


   
  var storyStart = true;

  window.onload = function () {
    
    
};

  </script>``