JS / jQuery / Canvas - Array tile map, find value of array in row and column

I'm creating an isometric tile map for a small www game, I have created an array to store map data, column and row numbers aswell as height and width of tile. Then I found function getTile on web which is on the end of this map array. It should be giving me value of the tile later on. It looks like this:

  var map = {
  cols: 13,
  rows: 11,
  twidth: 200,
  theight: 100,
  tiles: [
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 2, 2, 2, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 2, 2, 1,
    1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1,
    2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 2, 1,
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1,
  ],
  getTile: function(col, row) {
    return this.tiles[row * map.cols + col]
  }
};

Then I have a code to draw something on the canvas:

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

    var tile = map.getTile(c, r);

        var screenX = (c - r) * map.twidth/2;
        var screenY = (c + r) * map.theight/2;
        var screenX = screenX+1000;

        if(tile == 1) {
            var element = "area_grass_01";
        }

        if(tile == 2) {
            var element = "area_road_01";
        }

        var img = document.getElementById(element);


      ctxObj.drawImage(img, (tile - 1) * map.twidth, 0, map.twidth, map.theight, screenX, screenY, map.twidth, map.theight);
  }
}

Now, when I run console_log or alert with tile variable in it when the loop is run. It shows all the numbers that are included in map.tiles one by one. However when I try to find out which image should be drawn like this:

    if(tile == 1) {
        var element = "area_grass_01";
    }

    if(tile == 2) {
        var element = "area_road_01";
    }
    var img = document.getElementById(element);

It only draws the title with value 1. Rest stays undrawn. Like this:

Map render

Now I want to ask you how do I actually set the image according to the array number I've put inside map.tiles?

And another question that I have to anyone familiar with this. If I have a tile width 200 and height 100, how do I draw let's say a building which is much higher? Do I find the height of that drawing and set it higher by the drawing size - tile height (which is 100), or do you have any other advice on how to draw higher elements? And do I still use the same drawing technique for this:

    var screenX = (c - r) * map.twidth/2;
    var screenY = (c + r) * map.theight/2;

But with adjustment of map.theight in screenY?