Workshop › Blackjack › Step 20 of 22

Long hands fit

What we are doing

A hand of seven small cards would run off the table. When there are too many cards, they move closer and overlap a little, so the last card always ends 20 pixels before the right edge.

```js
// Cards overlap a little so a long hand still fits.
  const step = Math.min(CARD_W + 8, (canvas.width - 40 - CARD_W) / Math.max(1, hand.length - 1))
  hand.forEach((c, i) => drawCard(c, 20 + i * step, y, hideSecond && i === 1))
```

What it means

• The room for the steps is the table width minus both margins and one card; it is shared among the gaps.
• Math.min keeps the usual 72-pixel step when the hand is short.
• Math.max(1, ...) avoids dividing by 0 for a hand of one card.

Your turn

1. Above drawHand, write the comment.
2. Work out step, and use it instead of CARD_W + 8.

Skills: Drawing on a canvas

← Double down Buttons →

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