JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="background" width="500" height="500"></canvas>
<canvas id="player" width="500" height="500"></canvas>
<canvas id="enemy" width="500" height="500"></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{
  background: black;
}

JavaScript

function canvas(id){
	return document.getElementById(id).getContext('2d');
}
var bg = canvas('background');
var pg = canvas('player');
var eg = canvas('enemy');

var FPS = 60;
var WIDTH = 500;
var HEIGHT = 500;

function render(){}
function tick(){}
function main(){}

setInterval(function(){
	render();
  tick();
}, 1000/FPS);