Workshop › Endless Runner › Step 3 of 19
A game redraws its picture about 60 times a second. The drawing goes into draw, and loop calls it and asks the
browser to call loop again before the next screen refresh.
```js
function draw() {
ctx.fillStyle = '#f8fafc'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#475569'
ctx.fillRect(0, GROUND, canvas.width, 2)
ctx.fillStyle = '#334155'
ctx.fillRect(runner.x, runner.y, runner.w, runner.h)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```draw paints the whole picture, background first, so the old picture is wiped each time.requestAnimationFrame(loop) inside loop books the next turn; the last line starts the loop.Wrap the six drawing lines in function draw() { ... }, then write loop and the line that starts it.
Skills: The game loop, Functions