Workshop › Angry Birds-style Slingshot › Step 3 of 47

Draw it again and again

What we are doing

A game repaints its picture about 60 times a second, so that moving things look alive. We put the drawing in a function draw and call it from a loop that asks the browser for the next frame each time.

```js
function draw() {
  ctx.fillStyle = '#bae6fd'
  ...
  ctx.fillRect(SLING.x - 4, SLING.y, 8, GROUND - SLING.y)
}

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

requestAnimationFrame(loop)
```

What it means

function draw() { ... } wraps the drawing lines; they run each time draw() is called.
requestAnimationFrame(loop) asks the browser to run loop before the next screen refresh. loop asks again each time, so it never stops. The last line starts it.

Your turn

Wrap all the drawing lines (from the sky to the post) in function draw() { ... }, then write loop and the line that starts it at the end.

Skills: The game loop, Functions

← Sky and ground The aim: an angle and a pull →

All steps