JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>Request Anim Frame</title>  

</head>  
<body>  
    <canvas id="canvas" height="256" width="256"></canvas>
</body>  
</html>

CSS

canvas {
    border:1px solid #000;
}

JavaScript

(function(win) {

    win.game = {};

    game.requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    game.canvas = document.getElementById('canvas');
    game.context = game.canvas.getContext('2d');

    game.draw = function() {
        game.context.clearRect(0, 0, game.canvas.width, game.canvas.height);
        game.context.fillStyle = "rgb(150,29,28)";
        game.context.fillRect(10, 10, 236, 236);
    };
    
    game.fps = 60;
    game.run = (function() {
        var loops = 0,
            skipTicks = 1000 / game.fps,
            maxFrameSkip = 10,
            nextGameTick = (new Date()).getTime();

        return function() {
            loops = 0;

            while ((new Date()).getTime() > nextGameTick) {
                console.log('update');
                //game.update();
                nextGameTick += skipTicks;
                loops++;
            }
            game.requestAnimFrame.call(win, game.run);
            game.draw();

        };
    })();
    game.init = function() {
        game.requestAnimFrame.call(win, game.run);
    };
    game.init();

})(window);