JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <canvas id="gameWorld" width="100%" height="100%"></canvas>
    <div id="stats"></div>
  </body>

SCSS

* { margin: 0; padding: 0;}

body, html { height:100%; }

#gameWorld {
    position:absolute;
    width:100%;
    height:100%;
}

#stats {
  position: fixed;
  top:0px;
  right:0px;
  padding: 10px 15px;
  background-color:#fff;
  border: 1px solid #ddd;
}

JavaScript

var stop = false;
var frameCount = 0;
var $results = $("#stats");
var fps, fpsInterval, startTime, now, then, elapsed;

var $canvas = $("#gameWorld")[0];
var context = $canvas.getContext("2d");

startAnimating(30);

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    console.log(startTime);
    animate();
}

function animate() {

    // stop
    if (stop) {
        return;
    }

    // request another frame
    requestAnimationFrame(animate);

    // calc elapsed time since last loop
    now = Date.now();
    elapsed = now - then;

    // if enough time has elapsed, draw the next frame
    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        // draw stuff here
        draw();

        // Statistics
        var sinceStart = now - startTime;
        var currentFps = Math.round(1000 / (sinceStart / ++frameCount) * 100) / 100;
        $results.text("FPS: " + Math.round(currentFps));

    }
}

function draw() {
  context.clearRect(0, 0, width, height);

  drawBackground();
}

// Draw grid background
function drawBackground() {
  context.strokeStyle = '#e6ebf4';
  context.lineWidth = 1;

  var size = 50;
  for(var i=0; i < width + size; i+=size) {
    context.moveTo(i,0);
    context.lineTo(i,height);
    context.stroke();
  }
  for(var j=0; j < height + size; j+=size) {
     context.moveTo(0,j);
     context.lineTo(width,j);
     context.stroke();
  }
}

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
  width = $canvas.width = window.innerWidth;
  height = $canvas.height = window.innerHeight;
}
resizeCanvas();