A container with no height
The naive columns are what you get from dividing a size by 0. The guarded column is what the guard keeps.
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.