Painting with Pixels

Until now your code answered in text. Today it answers in pixels: meet the 400 × 300 canvas, learn its upside-down map, and paint your first scenes with four drawing spells.

You will be able to…

Point at any pixel with (x, y) — knowing (0, 0) is the top-left and y grows down
Call Draw.rect, Draw.circle, Draw.line and Draw.text with confidence
Name colours as CSS strings: "red", "#ff8800", "rgb(0 128 255)"
Compose a scene by painting back-to-front

The map of the canvas

Canvas exercises get a drawing surface 400 pixels wide and 300 tall — the Gamekit even tells you so: Draw.width is 400, Draw.height is 300. Every pixel has an address (x, y). Now the plot twist: (0, 0) is the top-left corner. x grows rightward, as you'd expect — but y grows downward. Screens have counted this way since electron beams swept old TVs top-to-bottom, and text works the same (line 1 is at the top). Your maths teacher's y-axis points up; your canvas's points down. Both are right; only one draws your games.

Two new things here. First, the semicolon: ; chains actions — "do this, then this" — so one let () = can hold a whole painting session. Second, the arguments of Draw.rect x y w h colour: the (x, y) of the rectangle's own top-left corner, then its width and height. So this rectangle's corner sits 20 right, 20 down, and it spans 100 × 60.

Don't take my word on the y-axis — watch it. Same x, growing y:

Deeper: is the top-left origin really universal?

Nearly. Screen buffers, window systems, image formats, the HTML canvas, most 2D game engines — all y-down, because memory is laid out row after row from the top. 3D graphics and maths libraries often flip to y-up, and every graphics programmer alive has shipped at least one upside-down scene because of it. When your game logic wants "altitude", you'll write a tiny conversion — a one-line function, as in lesson 1.2.

The Draw toolbox

Four shape spells and a wipe. Arguments are ints (pixels), colours are strings — the exact same colour names browsers use everywhere:

Draw.clear () — wipe the canvas to the default night blue. Pick your own wipe with a labelled argument: Draw.clear ~color:"black" ().
Draw.rect x y w h colour — rectangle; (x, y) is its top-left.
Draw.circle cx cy r colour — circle; (cx, cy) is the centre, r the radius. It spreads r pixels in every direction from there.
Draw.line x1 y1 x2 y2 colour — a segment from point 1 to point 2.
Draw.text x y content colour — writes a string; add ~size:32 before the coordinates for a headline.

Colours accept any CSS colour string: names like "red" or "rebeccapurple", hex codes like "#ff8800", even "rgb(0 128 255)". Misspell one and nothing crashes — the browser quietly shrugs and keeps the previous colour, so if a shape wears the wrong outfit, check your spelling first.

Enough theory — here's a full scene. Run it, then loot it: steal numbers, nudge coordinates, repaint the sky.

Your turn. From here on, canvas exercises are checked through the draw log: the Gamekit remembers every call you made, and the tests count shapes and colours. Your composition is yours; the counts are mine.

Every guild needs a flag. Draw one using at least 3 rectangles and at least 2 different colours — say, two stripes on a pole, though the design is entirely your call. Real flag, invented kingdom, anything.

Draw.rect x y w h colour — top-left corner, then width and height.

Two stripes and a pole is already 3 rectangles. Stack stripes by giving them the same x, and a second y that starts where the first stripe ends.

Painting order: back to front

The canvas has no eraser and no "move" — each call splats paint on top of whatever is already there. So scenes are painted like a theatre set is built: backdrop first, then the middle ground, then the actors. Game programmers call it the painter's algorithm: sky before dunes, dunes before camel. If your moon vanished, you probably painted the sky after it.

Practice range time. Draw a target of at least 3 concentric circles (same centre, shrinking radius) in at least 2 alternating colours. Painter's algorithm applies: biggest circle first, or the bullseye drowns.

Concentric = every circle shares the centre: Draw.circle 200 150 r colour with a shrinking r.

Alternate two colours as the radius shrinks: 100, 70, 40… each new circle lands on top of the last.

Compose a night scene: a sky (one rectangle covering the whole canvas), a moon, and at least 5 stars — stars are just small circles (radius 2 or 3). That's at least 1 rectangle and at least 6 circles in total. Sky first!

The sky rectangle covers everything: x 0, y 0, width 400, height 300 — already in the starter.

Scatter five tiny circles at different (x, y) for stars; the moon is one bigger circle. Six Draw.circle calls total.

🎮 Side quest: a gallery piece. Free-draw anything — your castle, a rocket, a camel with sunglasses, your initials in Draw.line calligraphy — as the fanciest scene you can. Give it a title with Draw.text ~size:32, screenshot it, and start the family gallery. This one is judged by the fridge door, not by tests.

Checkpoint quiz

Loot collected

The canvas is 400 × 300; (0, 0) is top-left; y grows down.
Draw.rect x y w h c (corner + size), Draw.circle cx cy r c (centre + radius), Draw.line, Draw.text, Draw.clear.
Colours are CSS strings: names, hex, rgb.
Paint back-to-front — later calls cover earlier ones.
; chains actions inside one let () =.

Next, a change of weapon: Maks takes command of HTML & CSS — the stuff game menus and HUDs are made of.