What the pixel ratio costs
Sizes are computed from numbers, so the output is the same on every device.
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
A 300 x 150 canvas:
pixel ratio 1 -> drawing buffer 300 x 150 = 45,000 pixels, 1 x the work of ratio 1
pixel ratio 1.5 -> drawing buffer 450 x 225 = 101,250 pixels, 2.25 x the work of ratio 1
pixel ratio 2 -> drawing buffer 600 x 300 = 180,000 pixels, 4 x the work of ratio 1
pixel ratio 3 -> drawing buffer 900 x 450 = 405,000 pixels, 9 x the work of ratio 1
A 390 x 844 phone viewport, full-screen canvas:
1x laptop screen ratio 1 -> 329,160 pixels per frame
2x phone ratio 2 -> 1,316,640 pixels per frame
3x phone ratio 3 -> 2,962,440 pixels per frame
3x phone, capped at 2 ratio 2 -> 1,316,640 pixels per frame
3x phone, capped at 1.5 ratio 1.5 -> 740,610 pixels per frame