Three layers — visuco

Challenge 3 of 13

That makes three separate layers you can colour: the canvas underneath everything, the fill inside a shape, and the edge around it. This picture shows all three at once.

Set the background, the fill and the outline.

Your code JavaScript

Set the background, the fill and the outline.

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 Backgrounds & Outlines

So far every shape has been a solid block of colour, but a shape really has two parts: the fill inside, and the outline around the edge. They are set by two different commands and never affect each other.

shapeColour(…) sets the fill. outlineColour(…) sets the edge, and outlineThickness(…) sets how many pixels wide that edge is drawn.

Every shape starts with a thin black edge already on it. On a black background you barely notice it, but it shows up as a seam wherever two shapes touch or overlap — which is why switching it off matters more than it first seems.

You can switch either part off. noShapeColour(); gives you outline-only shapes — hollow ones, with whatever is behind them showing through, because a hollow shape is not filled with black, it is not filled at all. noOutline(); takes the edge away completely. Both stay off for every shape after them, until you set a colour again.

backgroundColour(…) paints the whole canvas, so it belongs at the top: anything drawn before it gets painted over.

All of these are pens you pick up. They change the shapes that come after them and never the ones before, so moving one line above or below another changes the picture.

One last thing, which the next topic builds on: a line has no inside at all, so shapeColour does nothing to it. A line is drawn entirely by outlineColour and outlineThickness.