How to record canvas asynchronously?

[cuinjune]

Hi, I'm trying to record my canvas asynchronously and as fast as possible like this example: https://observablehq.com/@severo/asynchronous-canvas-recorder

So I tried to capture frames as fast as possible by doing something like this:

document.getElementById("button").addEventListener("click", function () {
        capturer.start();
        let count = 0;
        while (count < 400) {
            // clear background
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // rendering stuff ...
            ctx.beginPath();
            ctx.rect(count++ % 400, 20, 50, 30);
            ctx.stroke();

            // capture
            capturer.capture(canvas);
        }
        capturer.stop();
        capturer.save();
    });

But it seems to still have 16.6ms delays between each frame capturing.

How can I capture the 400 frames as fast as possible to save the video immediately?

In other words, can I record the canvas faster than the video play time?

[cuinjune]

Sorry I was wrong. When I actually measured time, I could confirm it captures faster than the length of the video.

So I'm assuming it is capturing the fastest it can do.