What a phone costs at each pixel ratio
One 390 × 844 phone page at different ratios. Rows marked cap show what Math.min(ratio, 2) uses instead. The last line is real: setPixelRatio(undefined) returns early.
A canvas has two sizes (its box on the page and its pixels) and the camera has an aspect ratio. You learn to keep all three in step with a ResizeObserver, to cap the pixel ratio at 2, and to survive a container that is 0 pixels tall.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make the resize function also redraw only when the size really changed (use the observer's entry).
Write a guard that clamps the canvas to at most 2048 pixels on its longer side.
Explain it without notes
Why must the camera's aspect change when the canvas's box changes, and which call makes the change take effect?
Why cap the pixel ratio at 2? Give the megapixel numbers for a 390 × 844 phone.
Console
Nothing logged yet.