JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="1000" height="1000">Your browser does not support the HTML canvas tag.</canvas>
</body>
</html>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var W=c.width

var n=32
var u=20;

var lazy=new Array(2*n-1);
var val=new Array(2*n-1);

for (i=0;i<2*n-1;++i) {
    lazy[i]="white";
    val[i]="white";
}

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function f(l,r,a,b,px,py,col,t) {
    await sleep(t);
    if (r<=a||b<=l) return;
    var w=(r-l);
    ctx.beginPath()
    ctx.rect(px-u*w/2,py-u/2,w*u,u)
    ctx.stroke()
    ctx.fillStyle = col;
    ctx.fill();
    if (w>1) {
        f(l,Math.floor((l+r)/2),a,b,px-u*w*0.25,py+u,col,t);
        f(Math.floor((l+r)/2),r,a,b,px+u*w*0.25,py+u,col,t);
    }
}

var promise=[]
    
promise.push(new Promise(function(resolve,reject) {
    f(0,n,0,n,500,100,"white",0)
}));

for (i=0;i<3;++i) {
    promise.push(new Promise(function(resolve,reject) {
        var l=Math.floor(Math.random()*n)
        var r=Math.floor(Math.random()*(n+1))
        if (l>=r) {
            var tmp=l;
            l=r;
            r=tmp;
        }
        console.log(l+" "+r);
        f(0,n,l,r,500,100,"red",1000)
    }));
}
promise[0].then(promise[1]).then(promise[2]).then(promise[3]);
</script>