Workshop › Tic-tac-toe › Step 21 of 33

Show who won

What we are doing

When the round is over, draw dims the board with a see-through black and writes X wins!, O wins! or It's a draw in the middle.

```js
  if (result) {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.55)'
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = 'white'
    ctx.font = 'bold 28px sans-serif'
    ctx.fillText(result === 'draw' ? "It's a draw" : result + ' wins!', canvas.width / 2, 140)
  }
}
```

What it means

• if (result) { ... } runs only when the round is over.
• rgba(0, 0, 0, 0.55) is black at 55% strength: the marks still show through.
• result + ' wins!' glues two strings together: 'X wins!'.
• "It's a draw" uses double quotes because it contains a '.

Your turn

In draw, after the forEach block's }) and before the function's last }, leave an empty line and write the if block. Run and win a round.

Skills: Drawing on a canvas, Game states

← The round ends Light up the winning line →

All steps

1. Get the canvas and the pen
2. Paint the board
3. The first grid line
4. Repeat with a loop
5. Finish the grid
6. The board as a list
7. A function that draws
8. Write an X
9. From cell number to position
10. Draw what the board holds
11. A color for each mark
12. Make a move
13. No playing on a taken cell
14. Listen for clicks
15. Which cell was clicked?
16. Clicks on any screen size
17. The eight winning lines
18. Find three in a row
19. Win, draw or go on
20. The round ends
21. Show who won
22. Light up the winning line
23. A function for a fresh round
24. Click to play again
25. A computer that picks a cell
26. The computer answers
27. Rule one: take the center
28. Rule two: win when you can
29. Rule three: block the opponent
30. Score a finished game
31. Look ahead: minimax
32. A computer that never loses
33. Build it yourself: keep score