A canvas that follows its container
Resize the preview or open the scene in a narrow window: the box stays in proportion because the observer updates the camera as well as the canvas.
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.Expected console output
resize ran: true | canvas fills the box: true
aspect matches the box: true