Workshop › Memory › Step 9 of 25

Draw the cards from the list

What we are doing

Now the drawing reads the cards instead of loop counters: a function draw paints the table, then each card at its own place. The nested loops are no longer needed.

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

  for (const card of cards) {
    const x = cardX(card)
    const y = cardY(card)
    ctx.fillStyle = '#6366f1'
    ctx.fillRect(x, y, CARD, CARD)
  }
}

newGame()
draw()
```

What it means

• for (const card of cards) runs once for each card, calling it card.
• x and y come from cardX and cardY.
• At the bottom, newGame() builds the cards first, then draw() paints them.

Your turn

Replace the loose drawing lines (background and loops) with the draw function, and call draw() after newGame().

Skills: Functions, Loops

← A card's corner Draw again and again →

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