Blurry canvas: attribute size vs CSS size
The top canvas has a third of the pixels, so the browser stretches each one three times wider: soft text and fuzzy curves.
<canvas> is a blank rectangle of pixels that JavaScript paints on; it's fast for games, charts and image effects, but what you draw is only pixels, so you must give it a text alternative.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Draw a 200 × 200 canvas with a red square of side 100 in the centre, and give it a text alternative.
Draw a smiley face (a yellow circle, two black eye circles) on a 150 × 150 canvas.
Explain it without notes
Why does <canvas> need JavaScript, and what does getContext("2d") give you?
What is the difference between immediate mode (canvas) and retained mode (SVG), and when would you pick each?
Why can a canvas look blurry, and how do you fix it?
How do you make a canvas chart accessible?
Preview
Console
Nothing logged yet.Expected console output
blurry: bitmap 100x50, shown 300x150
sharp: bitmap 300x150, shown 300x150