Why do my sprite animations leak memory after a few scene changes?

Yoshiii
Wed, 08 Apr 2026 04:14:31 +0000

@BobaMilk yup, every play() call starts another requestAnimationFrame loop, so the old one keeps running in the background with its own img and anim.

js
let rafId = null;

function play(anim) {
  if (rafId !== null) cancelAnimationFrame(rafId);

  const img = new Image();
  img.src = anim.sheet;
  anim.frame = 0;

  function tick() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, anim.frame * 16, 0, 16, 16, 40, 40, 64, 64);
    anim.frame = (anim.frame + 1) % anim.count;
    rafId = requestAnimationFrame(tick);
  }

  rafId = requestAnimationFrame(tick);
}

That gives you one active loop at a time. If you also destroy scenes, call cancelAnimationFrame(rafId) there too so a hidden tab or old area does not keep animating.

Yoshiii

Read full topic