Workshop › Memory › Step 19 of 25

Show moves and pairs

What we are doing

The top strip shows Moves: 3, and a found pair turns light green, so you can tell it from the cards you just opened.

```js
ctx.fillStyle = 'white'
ctx.font = '18px sans-serif'
ctx.textAlign = 'left'
ctx.textBaseline = 'middle'
ctx.fillText('Moves: ' + moves, GAP, 22)

ctx.font = '44px sans-serif'
ctx.textAlign = 'center'

    ctx.fillStyle = card.matched ? '#bbf7d0' : '#f8fafc'
```

What it means

• Three new lines above textBaseline set white, 18 px, left-aligned text; the line under it writes the counter at (12, 22), in the middle of the strip.
• card.matched ? '#bbf7d0' : '#f8fafc' picks light green for a pair, white otherwise.

Your turn

1. In draw, write the three text lines above ctx.textBaseline = 'middle', and the Moves line plus an empty line under it.
2. In the face-up branch, change the white fillStyle as shown.

Skills: Drawing on a canvas

← Count the moves All pairs found →

All steps

1. Get the canvas and the pen
2. The table
3. One card
4. A row of cards
5. Four rows
6. Every fruit twice
7. Cards that know themselves
8. A card's corner
9. Draw the cards from the list
10. Draw again and again
11. The face of a card
12. A fair shuffle
13. Which card is at a point?
14. Click to turn a card
15. One place for the rules
16. Two cards at a time
17. Pair or no pair
18. Count the moves
19. Show moves and pairs
20. All pairs found
21. Play again
22. A number that follows
23. Swap sides halfway
24. Animate the turn
25. Build it yourself: your best game