JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		
		<canvas id = "player" style = "z-index: 3; border:1px solid #000; position: absolute; left: 0px; top: 0px;" tabindex = '1'></canvas>
		<canvas id = "bg" style = "z-index: 1; border:1px solid #000; position: absolute; left: 0px; top: 0px;" tabindex = '3'></canvas>
		
		<script type = "text/javascript" src = "elements.js"></script>


	</body>

JavaScript

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

var canvas = document.getElementById('player'),
	bg = document.getElementById('bg'),
	ctx = canvas.getContext('2d'),
	bgctx = bg.getContext('2d'),
	width = 1280,
	height = 720,
	offsetx = 0,
	offsety = 0,
	tilesw = 4000,
	tilesh = 500,
	tilesize = 16,
	mapwidth = tilesw*tilesize,
	mapheight = tilesh*tilesize,
	player = {
		x: -8 + width/2 + mapwidth/2,
		y: -15 + height/2 + 200*16,
		width: 30,
		height: 50,
		speed: 6,
		velx: 0,
		vely: 0,
		jumping: false
	},
	keys = [],
	friction = 0.8,
	gravity = 0.3;

canvas.addEventListener('keydown', function(e) {keys[e.keyCode] = true;})
canvas.addEventListener('keyup', function(e) {keys[e.keyCode] = false;})

canvas.width = width;
canvas.height = height;
bg.width = width;
bg.height = height;

var bgimg = new Image();
	bgimg.src = 'http://i.stack.imgur.com/jGlzr.png';
	bgimg.width = 1664;
	bgimg.height = 1040;
	playerimg = new Image();
	playerimg.src = 'http://i.imgur.com/FW6NrXf.png';
	playerimg.width = 90;
	playerimg.height = 100;
	tilesimg = new Image();
	tilesimg.src = 'http://i.imgur.com/f0UIG5V.png';

var tgen = new Array(tilesw);

function initTiles() {

	dirt = {
		type: 'dirt',
		solid: true,
		x: 0,
		y: 0,
		width: tilesize,
		height: tilesize,
		vari: 0,
		durability: 2
	}
	empty = {
		type: 'empty',
		solid: false,
		x: 0,
		y: 0,
		width: tilesize,
		height: tilesize,
		durability: 0
	}
}

function initMap() {
	
	for (i = 0; i < tilesw; i++) {
		tgen[i] = new Array(tilesh);
		for (ii = 0; ii < tilesh; ii++) {
			tgen[i][ii] = dirt;
		}
	}
}

hillsarr = new Array();
function hills(x1,x2,y,z) {
	var groundlevel = y;

	for (i = x1; i < x2; i++) {

		groundlevel += (Math.floor(Math.random()*z));
		groundlevel -= (Math.floor(Math.random()*z));
		for (ii = groundlevel;...