Prerender on canvas 2D

In attempts to optimize the 2D animation created in canvas, one interesting option was found.

Preliminary visualization - prerender.

"And what if you record all the frames in advance and show them after the end of the animation?" - We thought with a friend and that's what happened the next day.

Live demo

amedomary.ru/prerender-canvas

Code v1.0

The page itself is on Github .

The logic is very simple and is implemented in 2 steps:

Step 1 - Save each frame of our animation to an array of images

  function renderLoop() {
    draw();

    // create prerender images
    canvasPrerender.toBlob(blob => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);

      reader.onload = function() {
        const image = document.createElement("img");
        image.src = reader.result;
        prerenderArr.push(image);
      };
    });

    if (prerenderIsCompleted) {
      requestAnimationFrame(renderLoop);
    } else {
      requestAnimationFrame(drawPreImg);
    }
  }

2 — —

  function drawPreImg() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(prerenderArr[i], 0, 0);

    requestAnimationFrame(drawPreImg);
  }

Analytic

. macbook 13 2019 .

.

FPS

Fps "" .

Fps "" (prerender): 14-22
Fps "" ( ): 58-60

, live demo.

Prerender — 9
— 3
— 12 ( live demo)

CPU / Performance

As can be seen from the screenshot below - our processor only suffers at the prerender stage. Draw ready-made images is not difficult.

Memory

For a small animation like ours, this whole thing takes:
~ 432/2 = 200 frames
~ 25 mb

Conclusion

If you have the opportunity to wait before showing the animation to the user and it will not eat up Gigabytes of memory - try to do something like that.

PS

If you have ideas on improving the performance of this approach - write :)