Style it all — visuco

Challenge 11 of 13

The background as well this time, so every style command at once. Work down the lines in order and check the target after each one rather than all at once.

Set a purple background, then a hollow square with a white outline 8 pixels thick.

Your code JavaScript

Set a purple background, then a hollow square with a white outline 8 pixels thick.

Console print() output

0 / 30 frames · 400×400

Target

Yours

Results

0%

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.