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

A function that draws

What we are doing

Every time a mark is placed, the whole board must be drawn again. We put the drawing lines in a function named draw, so one word repaints everything.

```js
function draw() {
  ctx.fillStyle = '#1e1e2e'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#585b70'
  for (let i = 1; i < 3; i++) {
    ctx.fillRect(i * CELL - 2, 0, 4, canvas.height)
    ctx.fillRect(0, i * CELL - 2, canvas.width, 4)
  }
}

draw()
```

What it means

• function draw() { ... } defines the recipe; it does not run yet.
• The body is indented by two spaces.
• draw() with parentheses runs it. It paints the background first, which wipes the old picture.

Your turn

Wrap all the drawing lines in function draw() { ... } (indent them by two spaces) and call draw() after it.

Skills: Functions

← The board as a list Write an X →

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