← All lessons/Getting Started· Lesson 1 of 32

The canvas & your first shapes

Meet the 400×400 canvas and its coordinate system, then draw rectangles and ellipses.

About 6 min

Your canvas

Every CodeLab sketch draws onto a 400 × 400 square canvas. Positions are measured in pixels from the top-left corner, which is (0, 0). The x value grows to the right, and — this trips everyone up at first — the y value grows downward.

Coordinates

The center of the canvas is (200, 200). The bottom-right corner is (400, 400).

Drawing shapes

rect(x, y, w, h) draws a rectangle whose top-left corner is at (x, y). ellipse(x, y, w, h) draws an ellipse centered at (x, y). Try editing the example below and press Run:

A rectangle and an ellipse.

Your turn

Draw a square and a circle. Put a rect at (150, 150) that is 100 wide and 100 tall, then draw an ellipse centered at (200, 200) that is 80 wide and 80 tall.

Hints