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

Draw what the board holds

What we are doing

Now the drawing reads the board array: for every cell, if it holds a mark, write that mark in its center. The board is empty, so the X disappears, and that is correct.

```js
board.forEach((mark, index) => {
  if (mark === '') return
  const x = (index % 3) * CELL + CELL / 2
  const y = Math.floor(index / 3) * CELL + CELL / 2
  ctx.fillText(mark, x, y)
})
```

What it means

board.forEach(...) runs the small function once for every cell, giving it the cell's content (mark) and its number (index).
(mark, index) => { ... } is a short way to write a function.
if (mark === '') return skips empty cells: === asks "is it equal?", return leaves the function at once.
x and y are the same formulas as before; fillText(mark, ...) writes whatever the cell holds.

Your turn

In draw, replace the four lines (from const index = 7 to ctx.fillText('X', x, y)) with the forEach block. Keep the fillStyle line above it. Press Run.

Skills: Arrays and objects, Loops

← From cell number to position A color for each mark →

All steps