Workshop › Memory › Step 2 of 25

The table

What we are doing

Our first drawing: the whole canvas becomes a dark indigo table for the cards. Drawing is always two moves: pick a color, then fill a shape with it.

```js
ctx.fillStyle = '#1e1b4b'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```

What it means

• ctx.fillStyle = '#1e1b4b' picks the fill color, a dark indigo.
• ctx.fillRect(x, y, width, height) fills a rectangle. 0, 0 is the top-left corner, and canvas.width and canvas.height (400 and 440) make it cover everything.

Your turn

Leave an empty line under const ctx = ..., write the two lines, then press Run.

Skills: Drawing on a canvas

← Get the canvas and the pen One card →

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