Workshop › Whack-a-Mole › Step 3 of 18

Draw the holes

What we are doing

All the drawing goes into a draw function: first the field, then a dark brown circle for every hole.

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

  for (const hole of holes) {
    ctx.fillStyle = '#3f2d1d'
    ctx.beginPath()
    ctx.arc(hole.x, hole.y, HOLE_R, 0, Math.PI * 2)
    ctx.fill()
  }
}

draw()
```

What it means

• for (const hole of holes) repeats once for each hole in the list.
• A circle is drawn in three steps: beginPath starts a new shape, arc describes the circle (middle, radius, from angle 0 to a full turn Math.PI * 2), fill paints it.
• draw() at the end runs the function once.

Your turn

Wrap the two background lines in function draw() { ... }, add the holes loop inside it, and call draw() at the end.

Skills: Drawing on a canvas, Functions

← Nine holes A clock and a loop →

All steps

1. A green field
2. Nine holes
3. Draw the holes
4. A clock and a loop
5. A mole in a hole
6. Moles pop up
7. Which hole was clicked?
8. Whack!
9. Show the score
10. Click to start
11. Time's running
12. Time's up
13. Best score
14. How far into the round?
15. Faster and faster
16. Remember each hit
17. Floating +1
18. Build it yourself: combos