JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" style="display:none;" width="600" height="500"></canvas>  
<div id="debug1"></div>
<div id="debug2"></div>
<canvas id="predraw"  width="600" height="500"></canvas>
<canvas id="mousemap" width="128" height="128"></canvas>

JavaScript

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

var preDrawCanvas = document.getElementById('predraw');
var preDrawCtx = document.getElementById('predraw').getContext('2d');

var mousemapCtx = document.getElementById('mousemap').getContext('2d');

var height = canvas.height;
var width = canvas.width;

var playerX = 50;
var playerY = 50;
var offsetX = 0;
var offsetY = 0;

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 tileColors = new Array();
tileColors.push("#FF0000");
tileColors.push("#00FF00");
tileColors.push("#0000FF");
var tileMap = new Array();

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

var brownTile = new Image();
var grayTile = new Image();

//brownTile.src = "http://i.imgur.com/14D3X.png";
//grayTile.src = "http://i.imgur.com/vdSEM.png";
brownTile.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAA/CAYAAAAoosBrAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wIExYGMLPcjawAAAGgSURBVHja7d3dbYNQEERhU4FdT1xbXuLa0k86IG+W4sjCmPszs3NuB3A+IeBhd1nX9ZR4btfLnwv//P5ZEu/DkgbgMfzjSYMQA2ArfCqE8gD2hk+DUBbA0fApEMoBaB2+OoQyAHqHrwrBHsDo8NUg2AKYHb4KBDsAauHdIdgAUA/vCkEegFt4NwiyANzDu0CQA1AtvDoEGQDVw6tCmA4gLbwahGkA0sOrQBgOgPBaEIYBILwmhO4ACK8NoRsAwntAaA6A8F4QmgEgvCeEwwAI7w3hbQCErwFhNwDC14LwMgDC14SwCYDwtSE8BUD4DAj/ABA+C8IdAOEzISxfH2fCBx+eAOlPAN4BeAfgK4CvAP4D8B9g4wChVvjdAIBQK/zbAIBQI/xhAEDwDt8MABA8wzcHAASv8N0AAMEjfHcAQNAOPwwAEDTDDwcABK3w0wAAQSP8dABAmBteBkAqBCaEhEJgRlAoBKaEhUJgTmAoBCaFhkJgVnAoBKaFh0JgX0AoBDaGhEJgZ1AoBLaGhUJgb2AoBDaHhkJgd3AohNTt4b++7LNfCn8z8gAAAABJRU5ErkJggg==";
grayTile.src =...