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

Write an X

What we are doing

Marks are big letters. We set a font, say that the point we give is the middle of the text, and write a pink X in the middle of the top-left cell, at (50, 50).

```js
  ctx.font = 'bold 64px sans-serif'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillStyle = '#f38ba8'
  ctx.fillText('X', 50, 50)
}
```

What it means

• ctx.font sets the font: bold, 64 pixels, a plain sans-serif face.
• textAlign = 'center' and textBaseline = 'middle' make the given point the middle of the text, so a cell's center is all we need.
• fillText('X', 50, 50) writes the text at that point.

Your turn

Inside draw, after the loop's closing } and before the function's last }, leave an empty line and write the five lines. Press Run.

Skills: Drawing on a canvas

← A function that draws From cell number to position →

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