Two parts to every shape

Challenge 1 of 13

Every shape has two parts: the fill inside it, and the outline around its edge. shapeColour sets the fill, and outlineColour sets the edge — they are separate, so the edge can be a quite different colour.

Give this circle's edge the target's colour.

Your code JavaScript

Give this circle's edge the target's colour.

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.