Workshop › Chess › Step 3 of 48
Put the row loop inside a second loop that counts the rows: a loop inside a loop visits all 64 squares. The color now
depends on r + c, so every row starts with the opposite color.
```js
for (let r = 0; r < 8; r++) {
for (let c = 0; c < 8; c++) {
const x = LEFT + c * SQ
const y = TOP + r * SQ
ctx.fillStyle = (r + c) % 2 === 0 ? '#e7d8b8' : '#b58863'
ctx.fillRect(x, y, SQ, SQ)
}
}
```r, the inner one the column c; for each row the whole inner loop runs.y = TOP + r * SQ moves each row 56 pixels down.(r + c) % 2: moving one square in any direction changes the sum by one, so neighbours always differ.Wrap the loop in for (let r = 0; r < 8; r++) { ... }, indent it, and change the y and color lines.
Skills: Drawing on a canvas, Loops
← One row of squares The starting position as text →