JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id='background' width=500 height=400 style='border: 1px solid black'></canvas>
<canvas id='player' width=500 height=400 style='border: 1px solid black'></canvas>
<canvas id='gui' width=500 height=400 style='border: 1px solid black'></canvas>

CSS

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 500px;
    position: absolute;
    top: 0;
    left: 0;
}
#background {
    
}

JavaScript

var Width = 500;
var Height = 500;

function canvas(id){
    document.getElementById(id).getContext('2d');
}

var pG = canvas('player');
var bG = canvas('background');
var gui = canvas('gui');

var Player = { 
    x: 50,
    y: 50,
    width: 8,
    height: 8,
    tick: function() {
        
  },
    render: function () {
        pG.fillRect(this.x, this.y, this.width, this.height);
}
}

function render() {
    Player.render();
}

function update() {}

setInterval(function () {
    render();
    update();
}, 1000/60);