Workshop › Sudoku › Step 2 of 28

Lines and boxes

What we are doing

The board is divided into nine 3 × 3 boxes. Thin grey lines separate the cells and thick dark lines outline the boxes.

```js
// Thin lines between cells, thick ones around each box.
for (let i = 0; i <= 9; i++) {
  ctx.fillStyle = i % 3 === 0 ? '#0f172a' : '#94a3b8'
  const w = i % 3 === 0 ? 3 : 1
  ctx.fillRect(LEFT + i * SIZE - w / 2, TOP, w, 9 * SIZE)
  ctx.fillRect(LEFT, TOP + i * SIZE - w / 2, 9 * SIZE, w)
}
```

What it means

• i goes from 0 to 9: 10 lines each way (the edges included).
• i % 3 === 0 is true for lines 0, 3, 6 and 9, the box borders: dark and 3 pixels wide; the others are grey and 1 pixel.
• Each line is a thin rectangle, centered on the edge (- w / 2).

Your turn

In draw, after the cells loop, write the comment and the lines loop.

Skills: Drawing on a canvas

← Nine by nine A puzzle from a string →

All steps

1. Nine by nine
2. Lines and boxes
3. A puzzle from a string
4. The puzzle's own digits
5. Keep drawing
6. The selected cell
7. Light up row, column and box
8. The same digit everywhere
9. Click to select
10. Move with the arrows
11. Write digits
12. The three rules in one loop
13. Show mistakes
14. Solved!
15. A clock
16. The solved message
17. Play again
18. The easiest cell
19. The solver
20. Random order
21. Invent a puzzle
22. A new puzzle every game
23. Hints
24. Best time
25. N for a new puzzle
26. A number pad
27. Tap the pad
28. Build it yourself: undo