How thick the edge is

Challenge 4 of 13

outlineThickness says how many pixels wide the edge is drawn, and like textSize it takes a single number. It stays set for every shape below it, so one line can give a whole row of shapes the same edge.

Set it to 12 to match the target.

Your code JavaScript

Set it to 12 to match the target.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Yours over Target — ghosted shapes are in the target but missing from 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.