JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#canvas{border:1px solid #ccc;}

JavaScript

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || window.oRequestAnimationFrame
            || window.msRequestAnimationFrame || function() {
                //return setTimeout(arguments[0], 1000 / 60);
                return -1;
            } // return -1 if unsupported
})();

window.cancelRequestAnimFrame = (function() {
    return window.cancelAnimationFrame
            || window.webkitCancelRequestAnimationFrame
            || window.mozCancelRequestAnimationFrame
            || window.oCancelRequestAnimationFrame
            || window.msCancelRequestAnimationFrame || function() {
                return -1;
            } // return -1 if unsupported
})();
    
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'rgba(255, 0, 0, .5)';
//ctx.fillRect(0,0, 10, 10);

    var frame = 0;
    function draw(){
        //ctx.clearRect(0, 0, 300, 300);
        ctx.fillStyle = 'rgba(255, ' + frame + ', 0, .5)';
        ctx.fillRect(frame,frame, 10, 10);
        frame += 1;
        if(frame < 200)
            requestAnimFrame(draw);
    }

requestAnimFrame(draw);