Workshop › Breakout › Step 2 of 39

Draw again and again

What we are doing

The picture is drawn only once. A game redraws it about 60 times a second, so we put the drawing in a draw function and call it from a game loop.

```js
function draw() {
  ctx.fillStyle = '#0f172a'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#e2e8f0'
  ctx.fillRect(paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H)
}

function loop() {
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

What it means

draw holds the four drawing lines. Painting the background first wipes the old picture.
loop draws, then asks the browser to run loop again before the next screen refresh.
The last line starts the loop. loop is passed without (): "run it when it is time", not "run it now".

Your turn

Wrap the four drawing lines in function draw() { ... } (indent them by two spaces), then write loop and the line that starts it under it.

Skills: The game loop, Functions

← The field and the paddle Keep a number inside limits →

All steps