JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <script type="text/javascript"> 
            
            function onload2(){
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                
                ctx.fillStyle = "#a00";
                var recW = 150;
                
                function animate2() {
                    ctx.clearRect(50,50,canvas.width,recW - 1);
                
                    ctx.save();
                
                    ctx.beginPath();
                    ctx.rect(50, 50, recW, recW);
                    ctx.clip();
                
                    ctx.beginPath();
                    ctx.arc(250,100,90,0,Math.PI*2,true);
                    ctx.fill();
                
                    ctx.restore();
                    ctx.beginPath();
                    ctx.rect(50 - 1, 50 - 1, recW + 2, recW + 2);
                    console.log(recW);
                    recW++;
                
                    if (recW == 400) clearInterval(run);
                }
                var run = setInterval(function() { animate2(); },5);
            }

        </script>
    </head>
    <body onload="onload2();" bgcolor="yellow">
        <canvas id="canvas" width="1000" height="1000"></canvas>
    </body>
    
</html>