Workshop › Memory › Step 1 of 25

Memory: Get the canvas and the pen

Flip cards two at a time and find the pairs. Shuffling fairly, finding what was clicked, timers, and a card-flip animation.

What we are doing

Memory is drawn on a <canvas> 400 pixels wide and 440 high, with the id game. We find it from JavaScript and ask it for its 2D context, the object that holds every drawing command.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
```

What it means

• document is the page; getElementById('game') finds the element whose id is game.
• const canvas = gives what was found a name, so later lines can use it.
• canvas.getContext('2d') asks the canvas for its 2D drawing tools; we call them ctx (short for context).

Your turn

Write the two lines under the three comment lines, then press Run.

Skills: Drawing on a canvas

The table →

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