JSFiddle - React, Tailwind, and code Playground

HTML

<style>
#main {
    border:#333;
    border-width:2px;
    border-style:solid;
}
</style>
<div id="main"></div>

JavaScript

var map = Array([1,0,0,0],[1,0,0,1],[0,0,1,1],[1,1,1,1]);
var tileDict = Array(
    "http://glacialflame.com/tutorials/tiles/01/land.png",
    "http://glacialflame.com/tutorials/tiles/01/water.png");
var tileImg = new Array();
var loaded = 0;
var loadTimer;
 
function loadImg(){
    for(var i=0;i<tileDict.length;i++){
        tileImg[i] = new Image();
        tileImg[i].src = tileDict[i];
        tileImg[i].onload = function(){
            loaded++;
        }
    }
}
 
function loadAll(){
    if(loaded == tileDict.length){
        clearInterval(loadTimer);
        drawMap();
    }
}
 
function drawMap(){
var tileH = 25;
var tileW = 50;
var mapX = 80;
var mapY = 10;
// mapX and mapY are offsets to make sure we can position the map as we want.
        for(i=0;i<map.length;i++){
                for(j=0;j<map[i].length;j++){
                    var drawTile= map[i][j];
                    var xpos = (i-j)*tileH + mapX;
                    var ypos = (i+j)*tileH/2+ mapY;
                    ctx.drawImage(tileImg[drawTile],xpos,ypos);
                }
        }
}

ctx = document.getElementById('main');
ctx.style.overflow = 'hidden';
ctx.style.width = 350 + 'px';
ctx.style.height = 150 + 'px';
ctx.position = 'absolute';
loadImg();
loadTimer = setInterval(loadAll,100);