Place it, size it, colour it

Challenge 10 of 12

Everything a shape has, on two shapes at once: the colour, where it goes and how big it is. Work down one line at a time rather than trying to see the whole picture in one go.

Match both shapes to the target.

Your code JavaScript

Match both shapes to the target.

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 Coordinates & Sizes

Every position on the canvas is two numbers: x across and y down. x counts from the left edge. y counts from the TOP edge, so y gets bigger as you move DOWN the picture — that catches everybody out at first.

The canvas here is 400 by 400. That makes 0, 0 the top-left corner, 400, 400 the bottom-right, and 200, 200 the dead centre — a handy landmark to measure everything else from.

circle(200, 200, 90); puts the middle of a circle 200 across and 200 down and makes it 90 wide. The last number is the size, and shapes that need two sizes take two: width first, then height. Swapping those two does not cause an error, it just gives you a tall shape where a wide one belongs.

The grid over the picture is there so you can read numbers off rather than guess at them. The Grid button in the top bar changes how fine the grid is, or turns it off altogether.

One thing worth remembering: for a square or a rectangle the first two numbers are the top-left corner, while circles and ovals are placed by their middle. Two shapes given the very same pair of numbers will not line up.

And two shapes can be positioned relative to each other: give them the same y and they sit level, or the same x and they sit one above the other.