Workshop › Memory › Step 11 of 25

The face of a card

What we are doing

A face-up card is a white square with its fruit in the middle; a face-down card stays purple. if ... else picks one of the two ways to draw it.

```js
ctx.textBaseline = 'middle'
ctx.font = '44px sans-serif'
ctx.textAlign = 'center'
for (const card of cards) {
  const x = cardX(card)
  const y = cardY(card)
  if (card.faceUp) {
    ctx.fillStyle = '#f8fafc'
    ctx.fillRect(x, y, CARD, CARD)
    ctx.fillText(card.symbol, x + CARD / 2, y + CARD / 2)
  } else {
    ctx.fillStyle = '#6366f1'
    ctx.fillRect(x, y, CARD, CARD)
  }
}
```

What it means

• The three ctx lines set a 44 pixel font and make the given point the middle of the text.
• if (card.faceUp) { ... } else { ... }: face up draws white plus the fruit, otherwise purple.
• x + CARD / 2, y + CARD / 2 is the card's center.

Your turn

In draw, replace the card loop with the new lines (the three ctx lines go above the for).

Skills: Drawing on a canvas, Game states

← Draw again and again A fair shuffle →

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