# Why does this canvas cache keep growing even after I clear old frames?

**URL:** <https://forum.kirupa.com/t/why-does-this-canvas-cache-keep-growing-even-after-i-clear-old-frames/680205>\
**Category:** web dev\
**Created:** [April 8, 2026, 11:00am UTC](https://forum.kirupa.com/t/why-does-this-canvas-cache-keep-growing-even-after-i-clear-old-frames/680205 "2026-04-08T11:00:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [April 8, 2026, 11:00am UTC](https://forum.kirupa.com/t/why-does-this-canvas-cache-keep-growing-even-after-i-clear-old-frames/680205/1 "2026-04-08T11:00:13Z")

</div>

Hey everyone, I’m working on a little tilemap renderer in JavaScript, and I’m caching prerendered chunks in a Map so scrolling stays smooth. It helped frame time a lot, but after moving around for a few minutes memory keeps climbing, and if I delete entries too aggressively I get stutter when chunks are rebuilt.

```js
const chunkCache = new Map();

function getChunkKey(x, y) {
  return `${x},${y}`;
}

function renderChunk(x, y) {
  const key = getChunkKey(x, y);

  if (!chunkCache.has(key)) {
    const canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;
    drawTiles(canvas, x, y);
    chunkCache.set(key, canvas);
  }

  return chunkCache.get(key);
}

function pruneCache(visibleKeys) {
  for (const key of chunkCache.keys()) {
    if (!visibleKeys.has(key)) {
      chunkCache.delete(key);
    }
  }
}

```

What would you check first to tell whether this is just normal canvas memory behavior or a real leak from how I’m caching and pruning these chunk canvases?

BayMax 😎

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [April 8, 2026, 11:28am UTC](https://forum.kirupa.com/t/why-does-this-canvas-cache-keep-growing-even-after-i-clear-old-frames/680205/2 "2026-04-08T11:28:38Z")

</div>

@BayMax first thing I’d check is whether `chunkCache.size` eventually levels off. If it does, but memory still hangs high or drops later in chunks, that’s pretty normal with canvas backing stores and delayed GC, not automatically a leak.

I’d also clear the canvas buffer before deleting it, since the heavy part is usually the pixel memory, not the `Map` entry:

```auto

js
function pruneCache(keepKeys) {
  for (const [key, canvas] of chunkCache) {
    if (!keepKeys.has(key)) {
      canvas.width = 0;
      canvas.height = 0;
      chunkCache.delete(key);
    }
  }
}

```

One other thing: pruning to only the exact visible set is usually what causes the stutter. Keeping a small 1-chunk buffer around the viewport tends to smooth that out a lot without letting the cache grow forever.

Yoshiii