Workshop › Rhythm Lanes › Step 5 of 35

A function that draws

What we are doing

The notes will move, so the picture must be drawn again many times a second. We pack the drawing into a function named draw, so one word repaints everything.

```js
function draw() {
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  for (let lane = 0; lane < LANES; lane++) {
    const x = LEFT + lane * LANE_W
    ctx.fillStyle = '#1e293b'
    ctx.fillRect(x + 2, 0, LANE_W - 4, canvas.height)
    ctx.fillStyle = COLORS[lane]
    ctx.fillRect(x + 6, HIT_Y - 4, LANE_W - 12, 8)
  }
}

draw()
```

What it means

function draw() { ... } defines the recipe; it does not run yet. Its body is indented by two more spaces.
draw() with parentheses runs it. Each run paints the background first, which wipes the old picture.

Your turn

Wrap the background lines and the loop in function draw() { ... } (two more spaces of indent) and call draw() after it.

Skills: Functions

← The hit line The song as text →

All steps