JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<body onload="init();">
<canvas id="viewport" width="480" height="320"></canvas>
</body>
</html>

CSS

html,body{width:100%;height:100%;margin:0px;}

#viewport{border:0px;margin:5px 10px;}

JavaScript

var viewport = document.getElementById('viewport');
var ctx = viewport.getContext('2d');
console.log(ctx);
var fps = 30;

function init(){
    setInterval(update, 1000 / fps);
}


spritesheet = new Image();
spritesheet.src = "http://img638.imageshack.us/img638/7623/spritesheeta.png";
var spriteSize = 16;

playerImg = new Image();
playerImg.src = "http://img594.imageshack.us/img594/2245/playerg.png";

/* The Map 30x20 tiles */
var map = [
    [{ground:0},{ground:0},{ground:0, object:1},{ground:0, item:2},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0}],
    [{ground:0},{ground:0},{ground:0, object:1},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0}],
    [{ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0}],
    [{ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
    {ground:0},{ground:0},{ground:0},{ground:0},{ground:0}],
    [{ground:0},{ground:0},{ground:0},{ground:0},{ground:0},
   ...