Canvas and Layers 🗂️¶

Choose your paper, and decide what goes on top

Choosing Your Paper: the Canvas 📄¶

Every drawing is made on a piece of paper called the canvas. If you don't choose one, it's 800 wide and 600 tall, with a white background. That's what the // Default canvas line in the earlier examples meant.

To choose your own, start your program with Canvas, a name, and its size and color:

Canvas paper having width 400, length 300, fill "lightyellow"
draw circle at 200, 150 having radius 100, fill "orange"

The playground stretches your canvas to fit the screen, so a smaller canvas makes everything look bigger. Try changing the width to 200 and the length to 150!

Canvas comes first

A drawing has at most one Canvas, and it must be the very first line, because you need paper before you can draw on it. Leave it out, and you get the default canvas.

What Goes on Top? 🥞¶

Shapes are drawn in the order you write them, like stickers: each new one goes on top of the ones before it.

Canvas paper having width 250, length 250
draw square at 100, 100 having size 120, fill "blue"
draw circle at 160, 160 having radius 60, fill "red"

Swap the two draw lines, and the square covers the circle instead.

Layers 🗂️¶

When a picture has lots of shapes, it helps to group them into layers, like sheets of see-through plastic stacked on top of each other. A layer goes on the canvas, and its shapes go inside { }:

Canvas paper having width 400, length 300

Layer sky on paper having {
  rectangle at 0, 0 having width 400, length 200, fill "skyblue"
  circle sun at 320, 60 having radius 30, fill "gold"
}

Layer ground on paper having {
  rectangle at 0, 200 having width 400, length 100, fill "forestgreen"
}

Just like the parts inside a shape, you don't write draw for the shapes in a layer.

Unlike shapes inside a shape, the numbers in a layer are measured from the corner of the canvas, as usual.

Moving a Layer Up or Down ⬆️⬇️¶

Layers stack in the order you write them. To put a layer somewhere else, say which layer it goes above (or over) or below (or under):

Canvas paper having width 400, length 300

Layer front on paper having {
  circle at 200, 150 having radius 80, fill "tomato"
}

Layer back on paper having {
  square at 60, 60 having size 180, fill "royalblue"
} below front

The back layer is written second, but below front tucks it underneath. This is handy when you add something to a picture later, like a background, and want it behind everything else.

Let's Build a Night Sky 🌙¶

Canvas night having width 400, length 300, fill "midnightblue"

Layer stars on night having {
  circle at 40, 40 having radius 3, fill "white"
  circle at 120, 80 having radius 2, fill "white"
  circle at 220, 30 having radius 3, fill "white"
  circle at 360, 110 having radius 2, fill "white"
  circle at 80, 150 having radius 2, fill "white"
}

Layer moon on night having {
  circle at 300, 80 having radius 45, fill "lightyellow"
  circle at 320, 65 having radius 45, color "midnightblue"
}

Layer hills on night having {
  oval at 100, 300 having width 300, length 160, fill "darkslategray"
  oval at 330, 310 having width 260, length 140, fill "darkolivegreen"
}

Challenge Time! 🏆¶

🌟 Challenge 1: Make the night sky canvas smaller, and see how the picture changes.
🌟 Challenge 2: Add a layer with a house on the hills.
🌟 Challenge 3: Add a layer of clouds, written last, that goes below the moon.

What's Next? 🚀¶

You can now choose your canvas, and stack your drawing in layers.

Next up, the last big idea: repeating things, so the computer does the boring part for you! 🔁