JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="800" height="600">
        canvas html5
</canvas>

JavaScript

window.onload = function() {
    var stage = new createjs.Stage("canvas");
    var bmp;
    var board;
    var img;
    var data;
    var tileClone;
    var x,y;
    var mapWidth;
    var mapHeight;
    
     img = new createjs.SpriteSheet({
        "images": ["http://i.stack.imgur.com/ZlsL6.png"],
        "frames": {
            "height": 64,
            "width": 64,
            "regX": 0,
            "regY": 0
        }
    });
    
    data = [
        [0, 0, 0, 0, 0, 0, 0, 0],
        [0, 4, 12, 12, 5, 0, 0, 0],
        [0, 15, 22, 22, 9, 0, 0, 0],
        [0, 7, 11, 22, 22, 12, 5, 0],
        [0, 0, 19, 14, 14, 14, 6, 0],
        [0, 0, 0, 0, 0, 0, 0, 0]
    ];
    
    board = new createjs.Container();
    board.x = 0;
    board.y = 0;
    stage.addChild(board);
    
    bmp = new createjs.Sprite(img);
    for (i = 0; i < data.length; i++) {
        for (j = 0; j < data[i].length; j++) {
            tileClone = bmp.clone();
            tileClone.gotoAndStop(data[i][j]);
            
            // Abaixo, em x, note a adição da margem de 350 pixels à esquerda
            // Note também o posicionamento cartesiano considerando a metade das
            // dimensões originais dos tijolos
            tileClone.x = 350 + j * tileClone.getBounds().width / 2;
            tileClone.y = i * tileClone.getBounds().height / 2;
            board.addChild(tileClone);
            
            // Essa é a função que reposiciona o tijolo considerando a projeção isométrica
            placeIsoTile(tileClone);
        }
    }
    stage.update();
};

function placeIsoTile(tileClone) {
    var isoX = tileClone.x - tileClone.y;
    var isoY = (tileClone.x + tileClone.y) / 2;
    
    tileClone.x = isoX;
    tileClone.y = isoY;    
}