JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <canvas id=hit></canvas>
</body>

JavaScript

var setupFps = function () {

     var lastTime = new Date();

     var hits = 0;
     var fps = 0;
     var hit = function () {
         hits++;
         var nowTime = new Date();
         var nowTimeG = nowTime.getTime();
         var lastTimeG = lastTime.getTime();
         var nl = nowTimeG - lastTimeG;

         if (nl > 1000) {
             var dt = nl;
             fps = Math.round(hits * 1000 / dt);
             hits = 0;
             lastTime = nowTime;
         }

         return fps;
     };

     return hit;
 };



 var hit = setupFps();

 var render = function () {
     var div = document.getElementById("hit");
     var ctx = div.getContext("2d");
     ctx.fillStyle = "#333333";
     ctx.beginPath();
     ctx.rect(20, 20, 60, 20);
     ctx.closePath();
     ctx.fill();
     ctx.fillStyle = "#ffffff";
     var fps = hit();

     ctx.fillText(fps, 30, 30);
     setTimeout(render, 1)
 };
 render();