Your first canvas drawing
gold is rgb(255, 215, 0) and seagreen is rgb(46, 139, 87). The only way to ask "what's here?" is to read pixels. The fallback text is a text node, not an element, so children is 0.
<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
Pixel at the sun's centre (r,g,b,alpha): 255,215,0,255
Pixel at the bottom-left (the hill): 46,139,87,255
Shapes in the DOM: 0 (the drawing is only pixels)