JSFiddle - React, Tailwind, and code Playground

by Will Stott

HTML

<canvas id="HUD" width="600" height="450">
    <a href="http://www.youtube.com/watch?v=s3Q80mk7bxE">Get Chrome.</a>
</canvas>
<canvas id="MAIN" width="600" height="450"></canvas>
<canvas id="BG" width="600" height="450"></canvas>

CSS

canvas {
    display:float;
    position:absolute;
}
#HUD {z-index:3;}
#MAIN {z-index:2;}
#BG {z-index:1;

JavaScript

function HUD() {

}

HUD.prototype.drawGrid = function() {
    for (var i = 10; i < width; i += 10) {
        hudCTX.fillRect(i, 0, 1, height);
    }
    for (var i = 10; i < height; i += 10) {
        hudCTX.fillRect(0, i, width, 1);
    }
}


HUD.prototype.redraw = function() {
    drawGrid();
}
    
function game() {
    var hudCanvas = document.getElementById('HUD');
    var hudCTX = hudCanvas.getContext('2d');
    var width = hudCanvas.width;
    var height = hudCanvas.height;
    var hud = new HUD();
}

var gameInstance = new game();
gameInstance.hud.redraw();