Workshop › Memory › Step 3 of 25

One card

What we are doing

The board is 4×4 cards of 85 pixels with 12 pixel gaps, below a 40 pixel strip for the move counter. We name those sizes and draw the first card, face down: a plain purple square.

```js
const SIZE = 4 // cards per row and per column
const CARD = 85
const GAP = 12
const TOP = 40 // room for the move counter above the cards

ctx.fillStyle = '#6366f1'
ctx.fillRect(GAP, TOP + GAP, CARD, CARD)
```

What it means

• SIZE cards per row and column, CARD the card size, GAP the space between cards, TOP the strip at the top.
• The numbers fit exactly: four 85 px cards and five 12 px gaps make 400, the canvas width.
• The first card starts one gap from the left (GAP) and one gap below the strip (TOP + GAP).

Your turn

1. Under const ctx = ..., leave an empty line and write the four constants.
2. At the very end, leave an empty line and write the two purple lines. Press Run.

Skills: Drawing on a canvas

← The table A row of cards →

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