JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="1000" height="1000"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

ctx.font = "30px Arial";
var itr = 0;

/**
 * Returns a random number between min (inclusive) and max (exclusive)
 */
function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

function randomDraw() {
  var imgdata = ctx.getImageData(0,0, canvas.width, canvas.height);
  var imgdatalen = imgdata.data.length;
  for(var i=0;i<imgdatalen/4;i++){  //iterate over every pixel in the canvas
    imgdata.data[4*i] = getRandomArbitrary(0, 256);    // RED (0-255)
    imgdata.data[4*i+1] = getRandomArbitrary(0, 256);    // GREEN (0-255)
    imgdata.data[4*i+2] = getRandomArbitrary(0, 256);    // BLUE (0-255)
    imgdata.data[4*i+3] = 255;  // APLHA (0-255)
  }
  ctx.putImageData(imgdata,0,0);
}

var fps = 0;
var framesInLastSecond = 0;
var frameIntv = 0;
var lastFrame = Date.now() - frameIntv;
(function animate() {
	if(Date.now() - lastFrame >= frameIntv) {
  	lastFrame = Date.now();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    randomDraw();
    ctx.fillStyle = "white";
		ctx.fillRect(0,0,canvas.width,75);
    ctx.fillStyle = "black";
    ctx.fillText("iteration: " + itr + "| fps:" + fps,10,50);
    framesInLastSecond++;
    itr++;
  }
  window.requestAnimationFrame(animate);
})();

setInterval(function() {
	fps = framesInLastSecond;
	framesInLastSecond = 0;
}, 1000);