JSFiddle - React, Tailwind, and code Playground

HTML

<BODY>
    <canvas id="game" width="500" height="300"></canvas>
    <canvas id="player" width="500" height="300"></canvas>
    <canvas id="canvas" width="1000" height="600" style="visibility :hidden" ;></canvas>
</BODY>

CSS

BODY {
    background:#303030;
}
#game {
    display:block;
    margin: 0px auto 0px;
}
#player, #canvasHUD {
    display:block;
    margin: -300px auto 0px;
}
#canvas {
    display:block;
    margin: -900px auto 0px;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var game = document.getElementById("game");
var gameCtx = game.getContext("2d");
var player = document.getElementById("player");
var playerCtx = player.getContext("2d");

var imgSprite = new Image();
imgSprite.src = "http://s6.postimg.org/dvhgnkaal/Sprite_Sheet.png";
var background = new Image();
window.Game = {};
angle = 0;

background.src = "http://s6.postimg.org/f0bisxwrl/test.png";

// wrapper for "class" Rectangle
(function () {
    function Rectangle(left, top, width, height) {
        this.left = left || 0;
        this.top = top || 0;
        this.right = (left + width) || 0;
        this.bottom = (top + height) || 0;
    }

    Rectangle.prototype.set = function (left, top, width, height) {
        this.left = left;
        this.top = top;
        this.width = width || this.width;
        this.height = height || this.height
        this.right = (this.left + this.width);
        this.bottom = (this.top + this.height);
    }

    Rectangle.prototype.within = function (r) {
        return (r.left <= this.left && r.right >= this.right && r.top <= this.top && r.bottom >= this.bottom);
    }

    Rectangle.prototype.overlaps = function (r) {
        return (this.left < r.right && r.left < this.right && this.top < r.bottom && r.top < this.bottom);
    }

    // add "class" Rectangle to our Game object
    Game.Rectangle = Rectangle;
})();

// wrapper for "class" Camera (avoid global objects)
(function () {

    // possibles axis to move the camera
    var AXIS = {
        NONE: "none",
        HORIZONTAL: "horizontal",
        VERTICAL: "vertical",
        BOTH: "both"
    };

    // Camera constructor
    function Camera(xView, yView) {
        // position of camera (left-top coordinate)
        this.xView = xView || 0;
        this.yView = yView || 0;

        // distance from followed object to border before camera starts move
        this.xDeadZone = 0; // min distance to...