Rendering: Sprite Caches and Layer Baking

Drawing four hundred glowing blocks per frame is slow. Drawing four hundred cached bitmaps is not.

Everything you see is drawn to a single canvas each frame. Making that fast required two specific optimisations, and measuring before and after.

The problem with drawing blocks honestly

Each block is a rounded rectangle with a three-stop vertical gradient, an inner bevel stroke and a specular highlight. Drawn properly that is a gradient object, several path operations and three fills, per block.

A full versus board is around four hundred blocks. Four hundred gradient allocations and twelve hundred path operations, sixty times a second, is a meaningful amount of work.

Sprite caching

The fix: cell size only changes when the layout changes. So each block face is drawn once into a small offscreen canvas per type and size, and the frame loop blits those bitmaps.

Four hundred gradient constructions become four hundred image draws, which the browser is extremely good at. The cache is cleared on resize and typically settles at fewer than ten entries.

The one exception is the active piece, whose glow pulses with its lock timer. That is a handful of cells, so it is drawn live.

Baking the overlays

The second cost was full-screen work: a vignette gradient, three additive nebula gradients, and scanlines drawn as three hundred one-pixel rectangles. All per frame.

The vignette and scanlines never change, so they are rendered once per resize into offscreen canvases and composited with a single image draw each.

The nebula does change, but slowly and blurrily, so it is rendered at a fifth of the resolution, refreshed a few times a second, and scaled up. Visually identical; a fraction of the fill cost.

The measurement

After both changes, the drawing work for a full versus board plus eight hundred particles measures about 2.4 milliseconds median, against a 16.7 millisecond budget for sixty frames a second. Roughly seven times the headroom needed.

That number is why the game runs smoothly on modest hardware.

Read next

• Every Sound Is Generated, Not RecordedOscillators, filtered noise and a reverb impulse built from decaying random numbers. No audio files anywhere.
• The Soundtrack Is a Sequencer, Not a FileA four-bar progression with drums, bass, arpeggio and a lead, whose tempo and arrangement climb with your level.
• Online Play With No Server At AllWebRTC connects the two browsers directly; a public relay handles only the introduction.
• Seeded Randomness: Why Both Players Get the Same PiecesA small deterministic generator, one shared number, and two identical bags on different machines.
• How the Hold Slot WorksPark one piece for later, but only once per piece, which is what makes it a decision rather than an undo button.
• Keep the Stack Flat: The One Habit That Matters MostA flat surface accepts every piece. A jagged one accepts a few. Most runs end because the board stopped accepting what the bag offered.