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

Repeat with a loop

What we are doing

The second vertical line sits at x = 200, which is 2 * CELL. Instead of copying the line, we let a for loop draw it for i = 1 and i = 2.

```js
for (let i = 1; i < 3; i++) {
  ctx.fillRect(i * CELL - 2, 0, 4, canvas.height)
}
```

let i = 1 starts a counter at 1; i < 3 keeps going while it is below 3; i++ adds 1 after each round.
So the body runs twice: i = 1 draws at 98, i = 2 draws at 198.
* is multiplication.

Replace the line ctx.fillRect(CELL - 2, 0, 4, canvas.height) with the loop (the fillRect inside it uses i * CELL). Press Run.

Skills: Loops