Workshop › Blackjack › Step 5 of 22

Cards on the table

What we are doing

Each card is a white rectangle with a thin dark border. A hand is drawn as a row of cards, 8 pixels apart: the dealer's at the top, yours below.

```js
const CARD_W = 64
const CARD_H = 90
const DEALER_Y = 70
const PLAYER_Y = 250

function drawCard(c, x, y) {
  ctx.fillStyle = '#ffffff'
  ctx.fillRect(x, y, CARD_W, CARD_H)
  ctx.strokeStyle = '#0f172a'
  ctx.lineWidth = 1
  ctx.strokeRect(x, y, CARD_W, CARD_H)
}

function drawHand(hand, y) {
  hand.forEach((c, i) => drawCard(c, 20 + i * (CARD_W + 8), y))
}

  drawHand(dealer, DEALER_Y)
  drawHand(player, PLAYER_Y)
```

What it means

• strokeRect draws only the outline of a rectangle, in strokeStyle.
• forEach((c, i) => ...) gives each card with its position in the hand; card i is i × 72 pixels to the right.

Your turn

1. Under SUITS, write the four size and position constants.
2. Above draw, write drawCard and drawHand.
3. In draw, draw both hands after the table.

Skills: Drawing on a canvas

← Deal Card faces →

All steps

1. Cards
2. A deck
3. Shuffle
4. Deal
5. Cards on the table
6. Card faces
7. Keep drawing
8. What is a hand worth?
9. Aces: 11 or 1
10. Hit: one more card
11. Stand
12. The hidden card
13. Chips
14. Who wins?
15. The dealer's turn
16. The next round
17. Blackjack!
18. Your record
19. Double down
20. Long hands fit
21. Buttons
22. Build it yourself: six decks