A blurry canvas on purpose
Both canvases fill a 150 × 150 box. The right one has only 38 × 38 pixels, so each of its pixels covers about 4 × 4 screen pixels.
A screen is a grid of coloured dots called pixels, and a web page draws 3D into a <canvas> element. The canvas has two sizes, the box it fills on the page and the grid of pixels it really draws, and when they disagree the picture is blurry.
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.
A card on a web page is 320 × 180 CSS pixels. What buffer size does a ratio-2 renderer need, and how many pixels is that? Write the two lines of code.
Write the one line that gives the showroom a sharp but affordable picture on any device.
Explain it without notes
A friend says their 3D scene looks blurry only on their phone. Give two causes and how you would check each.
Why does setPixelRatio(3) slow a scene down even though nothing in the scene changed?
Console
Nothing logged yet.Expected console output
sharp: buffer 150 x 150 -> each buffer pixel covers 1.0 x 1.0 CSS pixels (in its 150 x 150 box)
blurry: buffer 38 x 38 -> each buffer pixel covers 3.9 x 3.9 CSS pixels (in its 150 x 150 box)