Workshop › Candy Crush-style Match 3 › Step 8 of 29

Show the selection

What we are doing

The selected gem gets a white frame, drawn after all the gems so it is on top.

```js
if (selected) {
  ctx.lineWidth = 3
  ctx.strokeStyle = '#ffffff'
  ctx.strokeRect(LEFT + selected.c * SIZE + 2, TOP + selected.r * SIZE + 2, SIZE - 4, SIZE - 4)
}
```

What it means

• if (selected) is false while nothing is selected (undefined or null).
• strokeRect(x, y, width, height) draws an empty rectangle with strokeStyle and lineWidth. It is 2 pixels inside the square on each side.

Your turn

In draw, after the two loops (under their closing } lines), write the if block.

Skills: Drawing on a canvas

← Click a gem Swap two neighbours →

All steps

1. A place for the board
2. A checkered grid
3. The game loop
4. A board of random gems
5. Draw the gems
6. Start without matches
7. Click a gem
8. Show the selection
9. Swap two neighbours
10. Find every match
11. No match, no swap
12. A score and a fresh start
13. Clear the match
14. Let the gems fall
15. Two halves of a clear
16. Wait before clearing
17. Flash, and hands off
18. Cascades
19. Where a gem came from
20. Slide down
21. Out from under the top
22. Is there any move?
23. Never stuck
24. A hint after five seconds
25. Show the hint
26. Twenty moves
27. The end of a game
28. Remember the best score
29. Build it yourself: swipe to swap