Workshop › Candy Crush-style Match 3 › Step 21 of 29

Out from under the top

What we are doing

New gems start above the board and slide over the score line. Painting the top strip again after the gems hides them until they enter the board, as if they came out from under it.

```js
// New gems fall in from above the board: paint the score strip again, so they come out from under it.
ctx.fillStyle = '#1e1b4b'
ctx.fillRect(0, 0, canvas.width, TOP)
```

What it means

• The strip is the background color from the top of the canvas down to TOP, painted after the gems and before the score text.

Your turn

In draw, above ctx.fillStyle = 'white' (the score text), write the comment and the two lines.

Skills: Drawing on a canvas

← Slide down Is there any move? →

All steps

1. A place for the board
2. A checkered grid
3. The game loop
4. A board of random gems
5. Draw the gems
6. Start without matches
7. Click a gem
8. Show the selection
9. Swap two neighbours
10. Find every match
11. No match, no swap
12. A score and a fresh start
13. Clear the match
14. Let the gems fall
15. Two halves of a clear
16. Wait before clearing
17. Flash, and hands off
18. Cascades
19. Where a gem came from
20. Slide down
21. Out from under the top
22. Is there any move?
23. Never stuck
24. A hint after five seconds
25. Show the hint
26. Twenty moves
27. The end of a game
28. Remember the best score
29. Build it yourself: swipe to swap