Render on demand: count the frames
The loop is driven by hand for 180 turns so the count is exact. The last two lines then start the real loop.
The GPU's work grows with the number of pixels it shades, and every transparent layer shades them again. Cap the pixel ratio, avoid stacked transparency, and draw only when the picture changed.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a function pickRatio(devicePixelRatio, canvasWidth, canvasHeight, maxPixels) that lowers the ratio so the buffer never exceeds maxPixels.
A viewer with autoRotate freezes after you switch to render on demand. Why?
Explain it without notes
Why is a phone at pixel ratio 3 often slower than a laptop, even with a faster chip?
How does an opaque object in front reduce the work, and why does a transparent one not?
Console
Nothing logged yet.Expected console output
60 frames, nobody touching anything: frames drawn = 1
after one change, 60 more frames: frames drawn = 2
with autoRotate on, 60 more frames: frames drawn = 61