Workshop › Blackjack › Step 6 of 22

Card faces

What we are doing

Now each card shows its rank in the top-left corner and a big suit symbol in the middle. Hearts and diamonds are red, spades and clubs dark.

```js
ctx.fillStyle = c.suit === '♥' || c.suit === '♦' ? '#dc2626' : '#0f172a'
ctx.font = 'bold 18px sans-serif'
ctx.textAlign = 'left'
ctx.fillText(c.rank, x + 6, y + 22)
ctx.font = '34px sans-serif'
ctx.textAlign = 'center'
ctx.fillText(c.suit, x + CARD_W / 2, y + 64)
```

What it means

• || means "or": red for hearts or diamonds.
• The rank is written from the left, 6 pixels in; the suit is centered on the card.

Your turn

At the end of drawCard, write the face lines.

Skills: Drawing on a canvas

← Cards on the table Keep drawing →

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