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);
    topdown.addEventListener('mousemove', mouseMove);
}

function mouseMove (e) {
    var offset = topdown.offsetTop;
    var x = e.pageX;
    var y = e.pageY-offset;
    //alert ( y ); 240
    //draw ( x, y );
    positionToUser ( x, y );
}

function positionFromUser ( x, y ) {
    
}

function positionToUser ( x, y ) {
    // isometric "vertical" line goes from top to left
    // therefore isoX decreases when gridY increases:
    var verticalToHorizontal = -y;
    
    // isoY  increases when gridY increases:
    var verticalToVertical = y;
   
    // isometric "horizontal" line goes from left to bottom
    // therefore isoY increases when gridX increases:
    var horizontalToVertical = x;
    
    // isoX increases when gridX increases:
    var horizontalToHorizontal = x;
    
    //let's sum this up:
    var isoX = horizontalToHorizontal + verticalToHorizontal;
    var isoY = verticalToVertical + horizontalToVertical;
    
    //or:
    isoX = x - y;
   ...