← WORKSHOP

02. Landscape, made with rectangles.

Make a small scene using the HTML Canvas 2D API. Drag the slider to change the sky. Nothing here is a downloaded picture.

The main trick

// A sky can be a lot of horizontal lines.
for (let y = 0; y < canvas.height; y++) {
  ctx.fillStyle = `rgb(${blue}, ${green}, ${light})`;
  ctx.fillRect(0, y, canvas.width, 1);
}
// Then draw hills, water, and a sun with shapes.

Exercise: change the colors, make the hills taller, and add a house. Shapes are cheap; imagination is not.