Tutorials › Your First Sketch JS Mode

Your First Sketch

Learn the basics: set up a canvas, draw shapes, and understand how setup() and draw() work.

1

Hello, Canvas!

Every Glitchlab program starts with two special functions: setup() and draw(). The setup function runs once at the very beginning — it's where you set the size of your canvas. The draw function runs over and over, about 60 times per second, which is what makes animation possible. Let's start simple: set up a canvas and paint it sky blue.
0 / 7 lines
Loading editor...
size(400, 300); } function draw() { background("skyblue"); }
Try it!

Try changing "skyblue" to "hotpink" or "midnightblue" — what happens?

2

Drawing Shapes

Now let's add some shapes! Use rect() to draw a rectangle and circle() to draw a circle. Each shape needs a position (x, y) and a size. For rectangles, you give the top-left corner, width, and height. For circles, you give the center and radius.
0 / 15 lines
Loading editor...
size(400, 300); } function draw() { background("skyblue"); // A green rectangle (ground) fill("mediumseagreen"); rect(0, 220, 400, 80); // A yellow circle (sun) fill("gold"); circle(320, 60, 40); }
Try it!

Try moving the sun by changing its x and y numbers. Can you make it bigger?

3

Adding More Details

Let's build a little scene! You can draw as many shapes as you want. They stack on top of each other in the order you draw them — shapes drawn later appear on top. Use triangle() for a roof and text() to add words.
0 / 33 lines
Loading editor...
size(400, 300); } function draw() { background("skyblue"); // Ground fill("mediumseagreen"); rect(0, 220, 400, 80); // Sun fill("gold"); noStroke(); circle(320, 60, 40); // House body fill("tomato"); rect(100, 140, 120, 80); // Roof fill("saddlebrown"); triangle(90, 140, 160, 80, 230, 140); // Door fill("sienna"); rect(140, 170, 40, 50); // Title fill("white"); textSize(24); text("My First Sketch!", 100, 260); }

What to try next

  • Add a window to the house (hint: draw a small blue rectangle on the house)
  • Change the colors to make a nighttime scene — try a dark blue background and a white moon
  • Add more houses or trees to build a whole neighborhood
  • Try drawing clouds using a few overlapping white circles
The Drawing Grid →