Canvas beats the DOM for thousands of cells

Rendering the Life Calendar grid as ~4,680 <div>s made mobile layout stutter for a full second on each resize. Moving to a single <canvas> dropped it to one paint pass with no layout cost at all.

const ctx = canvas.getContext('2d')!;
for (let i = 0; i < weeks; i++) {
  const x = (i % perRow) * cell;
  const y = Math.floor(i / perRow) * cell;
  ctx.fillStyle = i < lived ? accent : line;
  ctx.fillRect(x, y, cell - gap, cell - gap);
}

Rule of thumb I now trust: past a few hundred simple, non-interactive shapes, stop reaching for DOM nodes. One canvas, one loop, done — and it scales to tens of thousands of cells without breaking a sweat.