JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="background" width="500" height="500"></canvas>
<canvas id="snake" 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 sg = canvas("snake");


var fps = 60;
var snake[];
var block;
var food;

function render(){}
function update(){}

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