Overdraw you can read from one pixel
Each layer adds 1/255 of red. The value is read straight after render().
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
1 sheet draw calls: 1 | layers blended over the middle pixel: 1
12 sheets draw calls: 12 | layers blended over the middle pixel: 12
12 sheets behind an opaque wall draw calls: 13 | layers blended over the middle pixel: 0