JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="900px" width="900px"></canvas>
<script>

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

    var map_array = [

    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0]

    ];

    var grass=new Image();
    var dirt=new Image();

    grass.src='http://i.imgur.com/tL6nW.gif';
    dirt.src='http://i.imgur.com/BfZ5f.gif';


    var posX = 0;
    var posY = 0;
    
    for(i = 0; i < map_array.length; i++){

        for(j = 0; j < map_array[i].length; j++){

            if(map_array[i][j] == 0){

                context.drawImage(grass, posX, posY, 75,75);

            }
            if(map_array[i][j] == 1){

                context.drawImage(dirt, posX, posY, 75,75);

            }

            posX+=75;

        }

        posX = 0;
        posY+=75;


    }

</script>