Workshop › Tetris-style Blocks › Step 4 of 32

Draw the whole board

What we are doing

draw() paints the well and then every filled cell of board. Two loops, one inside the other, visit all 200 cells.

```js
function draw() {
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#1e293b'
  ctx.fillRect(0, 0, COLS * CELL, ROWS * CELL)

  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLS; col++) {
      if (board[row][col]) drawCell(col, row, '#94a3b8')
    }
  }
}

draw()
```

What it means

The painting of the page and the well moves into draw.
for (let row = 0; row < ROWS; row++) counts 0 to 19; the inner loop counts columns 0 to 9.
if (board[row][col]) is true for any number except 0, so only filled cells are drawn.

Your turn

Wrap the four painting lines in function draw() { ... } (indented), add the two loops inside it.
Replace the test call drawCell(0, 19, ...) with draw().

Skills: Loops, Drawing on a canvas

← Draw one cell The number is the color →

All steps