The background goes first

Challenge 7 of 12

Painting the canvas covers whatever is already on it, so backgroundColour belongs above the shapes or it hides them. These two lines are the wrong way round, which is why the circle has vanished under the blue.

Swap the two lines over.

Your code JavaScript

Swap the two lines over.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

Press Run to check your code

Penalties: none this run

Report this challenge

Lesson Colours

Colours, now that you know the shape of a sketch. Everything here happens inside everyFrame, on the lines that draw each frame.

Colours have names you can simply type, in capital letters: RED, ORANGE, YELLOW, GREEN, BLUE, PURPLE, PINK, BROWN, CYAN, MAGENTA, WHITE, BLACK and GREY. You never have to remember them — the Reference button above your code lists all thirteen, with a patch of each colour beside its name, and clicking one types it in for you.

shapeColour(RED); chooses the colour for shapes drawn after it. Think of it as picking up a coloured pen: everything you draw from then on uses that colour, until you pick up another one. So one shapeColour line can serve several shapes, and shapes that need different colours need a line each — placed just above the shape it should reach. Moving the same line higher or lower changes which shapes it affects.

backgroundColour(BLUE); paints the whole canvas instead, which is why it belongs at the top: anything drawn above it gets painted over and disappears.

In this topic you will name colours from the target picture, learn where a colour reaches, paint the canvas, and finish by changing a shape's name as well as its colour — which is where the next topic picks up.