Workshop › Lunar Lander › Step 2 of 31

Draw the hills

What we are doing

The ground is drawn as one filled shape: start at the bottom left, go through every point, finish at the bottom right.

```js
function draw() {
  ctx.fillStyle = '#020617'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#475569'
  ctx.beginPath()
  ctx.moveTo(0, canvas.height)
  ground.forEach((y, i) => ctx.lineTo(i * STEP, y))
  ctx.lineTo(canvas.width, canvas.height)
  ctx.fill()
}

makeGround()
draw()
```

What it means

The first two lines paint a dark sky.
beginPath starts a shape, moveTo puts the pen at the bottom left, lineTo draws to a point.
forEach((y, i) => ...) runs once per height, with i its index: point i is at x = i * STEP.
The last lineTo goes to the bottom right; fill() closes the shape and paints it grey.

Your turn

Write draw above the makeGround() call, with an empty line after it, and write draw() under makeGround().

Skills: Drawing on a canvas

← Random hills A landing pad →

All steps