JSFiddle - React, Tailwind, and code Playground

HTML

<canvas style="z-index: 0;" id="canvas" width="480" height="380"></canvas>  
<div id="debug1"></div>
<div id="debug2"></div>
<div id="debug3"></div>
<canvas style="z-index: 0;" id="topdowncanvas" width="480" height="480"></canvas>

JavaScript

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

var topdown = document.getElementById('topdowncanvas');
var topdownCtx = document.getElementById('topdowncanvas').getContext('2d');

var rightKey = false,
    leftKey = false,
    upKey = false,
    downKey = false;

var timeAtLastFrame = new Date().getTime();
var idealTimePerFrame = 1000 / 30;
var leftover = 0.0;
var frames = 0;

var playerX = 50;
var playerY = 50;

playerX = Math.floor(Math.random() * 8000);
playerY = Math.floor(Math.random() * 8000);

var isometricTiles = new Array();
var topdownTiles = new Array();

var tileMap = new Array();

for (x = 0; x < 250; x++) {
    var row = new Array();
    for (y = 0; y < 250; y++) {
        row[y] = Math.floor(Math.random() * 3);
    }
    tileMap[x] = row;
}

init();


function init() {
    loadImg();
    document.addEventListener('keydown', keyDown, false);
    document.addEventListener('keyup', keyUp, false);
    setInterval(gameLoop, 1000 / 30);

}

function gameLoop() {

    var timeAtThisFrame = new Date().getTime();
    var timeSinceLastDoLogic = (timeAtThisFrame - timeAtLastFrame) + leftover;
    var catchUpFrameCount = Math.floor(timeSinceLastDoLogic / idealTimePerFrame);

    for (i = 0; i < catchUpFrameCount; i++) {
        updateLogic();
        frames++;
    }

    drawScreen();

    leftover = timeSinceLastDoLogic - (catchUpFrameCount * idealTimePerFrame);
    timeAtLastFrame = timeAtThisFrame;
}

function loadImg() {

    var blueTopdown = new Image();
    var brownTopdown = new Image();
    var greenTopdown = new Image();

    blueTopdown.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJHhE3Ae4abcwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMUlEQVRYw+3NQQ0AIAwEsIPH/DseMi4hrYGezKbhpkQsFovFYrFYLBaLxWKxWPxj/ABL8QFV6ma3vgAAAABJRU5ErkJggg==";
    brownTopdown.src =...