JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="400" width="1000"></canvas>

CSS

#canvas {
      outline: 3px solid black;
    }

JavaScript

window.onload = function() {
      drawMap();
      context.drawImage(mario, xpos, ypos, 50, 50);
    }

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.width = "1000";
    canvas.height = "400";

    var xpos = 0;
    var ypos = 0;
    var grass = new Image();
    var water = new Image();
    var dirt = new Image();
    var mario = new Image();

    mario.src = 'https://cdn2.iconfinder.com/data/icons/bright-food-products/512/lobster-128.png';
    grass.src = 'https://cdn2.iconfinder.com/data/icons/bright-food-products/512/lobster-128.png';
    water.src = 'https://cdn2.iconfinder.com/data/icons/bright-food-products/512/lobster-128.png';
    dirt.src = 'https://cdn2.iconfinder.com/data/icons/bright-food-products/512/lobster-128.png';

    var map = [
      [1, 1, 0, 1, 1, 1, 1, 0, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
      [1, 1, 0, 1, 1, 1, 1, 1, 1, 1]

    ];

    function drawMap() {
      var localX = 0;
      var localY = 0;
        
      for (var i = 0; i < map.length; i++) {
        for (var j = 0; j < map[i].length; j++) {

          if (parseInt(map[i][j]) == 0) {
            context.drawImage(grass, localX, localY);
          }

          if (parseInt(map[i][j]) == 1) {
            context.drawImage(dirt, localX, localY)
          };
          if (parseInt(map[i][j]) == 2) {
            context.drawImage(water, localX, localY);
          }
          localX += 100;
        }
        localX = 0;
        localY += 100;
      }
    }

    function move(e) {
      if (e.keyCode == 39) {
        xpos += 50;
      }
      if (e.keyCode == 37) {
        xpos -= 50;
      }
      if (e.keyCode == 38) {
        ypos -= 50;
      }
      if (e.keyCode == 40) {
        ypos += 50;
      }

      context.clearRect(0, 0, canvas.width, canvas.height);
  	drawMap();
        context.drawImage(mario, xpos, ypos, 50, 50);

    }
  ...