JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="800px" height="480px" id="gameCanvas" class="layer" >ERROR!</canvas>

CSS

canvas{
	background-color: black;
}

JavaScript

//Get the Context
var canvas = document.getElementById('gameCanvas');
context = canvas.getContext('2d');

//Position of the square
var xPosition = 10;
var yPosition = 100;

//Position increase
var xShift = 10;

//Aimed FPS
var fps = 30;

//MainLoop
function mainLoop()
{
    //Let Square move!
    xPosition = xPosition + xShift;
	window.setTimeout(mainLoop, 1000 / fps);
}

//Draw The Scene
function renderLoop()
{
	context.clearRect(0,0,800,480);
	context.fillStyle = "white";
	context.fillRect(xPosition, yPosition, 100,100);
	window.requestAnimationFrame(renderLoop);
}

//Function calls
mainLoop();
renderLoop();