JSFiddle - React, Tailwind, and code Playground

by pukster

HTML

<html>
    
    <head>
        <script type="text/javascript">            
            function onload1(){
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
            
                ctx.fillStyle = "#a00";
                var recW = 300;
            
                function animate1() {
                    ctx.clearRect(50,50,recW + 1,recW + 1);
            
                    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.rect(50 - 1, 50 - 1, recW + 2, recW + 2);
                    ctx.lineWidth = 10;
                    ctx.stroke();
                    console.log(recW);
            
                    recW--;
            
                    if (recW == 150) clearInterval(run);
                }
                var run = setInterval(function() { animate1(); },5);
            }
            
            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);
                    ctx.lineWidth = 10;
              ...