JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <style>
        body {
            overflow: hidden;
            background-color: #000000;
            color: #ffffff;
        }
        #backcanv {
            top: 100px;
            left: 100px;
            position: absolute;
            width: 200px;
            height: 200px;
            image-rendering: optimizeSpeed;             /* Older versions of FF          */
            image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
            image-rendering: -webkit-optimize-contrast; /* Safari                        */
            image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
            image-rendering: pixelated;                 /* Awesome future-browsers       */
            -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
        }
        #camerapanel {
            position: absolute;
        }
    </style>
</head>
<body>
    <canvas id="backcanv"></canvas>  
    <div id="camerapanel">
        <div id="fps">FPS: 0</div>
        <div id="updates">Updates: 0</div>
    </div>
    <script>
        var canvas = document.getElementById("backcanv");

        var loop_delay = 1000/60;
        var add_each = 10;
        var updates_per_loop = 20;

        var cnew = 0;
        var old_ms = 0;

        canvas.width = 100;
        canvas.height = 100;
		ctx = canvas.getContext('2d');
		var imageData = ctx.createImageData(100, 100);
        var arr = new ArrayBuffer(100*100*4);
        var buf32 = new Uint32Array(arr);
        var buf8 = new Uint8Array(arr);
        var color1 = 0xff000000;
        var color2 = 0xffffffff;

        var updates_count = 0;
		

        function drawLoop() {

            var d = new Date();
            var ms = d.getTime();

            if (cnew <= 0) {
                
                document.getElementById("fps").innerHTML = "FPS: " + Math.round(1000 * add_each / (ms - old_ms));
               ...