Hollow, thick and coloured

Challenge 10 of 13

Three of them together now: hollow inside, a colour for the edge, and a thickness for it. Their order does not matter here, because all three sit above the shape they affect.

Make it hollow, with a cyan outline 12 pixels thick.

Your code JavaScript

Make it hollow, with a cyan outline 12 pixels thick.

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.