A corner, not a middle

Challenge 5 of 12

A rectangle's first two numbers are its TOP-LEFT CORNER, not its middle — so the pair that would centre a circle puts a rectangle down and to the right of that spot instead. Watch the grid as you go.

Set the rectangle's corner.

Your code JavaScript

Set the rectangle's corner.

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.