JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="400px" width="500px"></canvas>

CSS

#canvas{
    border: 2px solid red;    
  }

JavaScript

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d')

var mapArray=[
    [0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0]
    
  ];
var grass=new Image();
var sand=new Image();

var loadCount = 0;

grass.onload=onload;
sand.onload=onload;

grass.src='http://place-hoff.com/64/64';
sand.src='http://fillmurray.com/64/64';

function onload () {
    loadCount++;
    if (loadCount == 2) {
        draw();
    }
}

function draw () {
    var posX=0;
    var posY=0;
    for(var i=0; i < mapArray.length; i++){
        posX=0
        for(var j=0; j < mapArray[i].length; j++){
            
            if(mapArray[i][j]==0){
                context.drawImage(grass, posX, posY, 64,64);
            }
            
            if(mapArray[i][j]==1){
                context.drawImage(sand, posX, posY, 64,64);
            }
            posX+=64;
            
        }
        posY+=64;
        
    }
}