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

Light up the winning line

What we are doing

A small touch that makes a big difference: after dimming, we light up the three winning cells with a see-through yellow, so the player sees at once why the round ended.

```js
// Dim the board, then light up the winning line on top so it stands out.
ctx.fillStyle = 'rgba(0, 0, 0, 0.55)'
ctx.fillRect(0, 0, canvas.width, canvas.height)
const line = winningLine(board)
if (line) {
  ctx.fillStyle = 'rgba(250, 204, 21, 0.25)'
  for (const index of line) ctx.fillRect((index % 3) * CELL, Math.floor(index / 3) * CELL, CELL, CELL)
}
```

What it means

• winningLine(board) gives the three winning cell numbers, or undefined after a draw (then nothing is lit).
• for (const index of line) repeats for each of the three numbers; a one-line body needs no braces.
• Each cell's top-left corner uses the column and row formulas from before.

Your turn

In draw, add the comment above the dimming lines, and the line lines right under the dimming fillRect.

Skills: Drawing on a canvas, Loops

← Show who won A function for a fresh round →

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