Workshop › OutRun-style Racer › Step 2 of 44
Soon the road will move. Motion means painting the whole picture again about 60 times a second, like the frames of a
cartoon. So the drawing goes into a function, draw, and a game loop calls it every frame.
```js
function draw() {
ctx.fillStyle = '#7dd3fc'
ctx.fillRect(0, 0, W, H)
ctx.fillStyle = '#15803d'
ctx.fillRect(0, H / 2, W, H / 2)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```function draw() { ... } names the drawing recipe; it runs only when called as draw().loop draws one frame and asks the browser, with requestAnimationFrame(loop), to run it again before the next
screen refresh.Wrap the four painting lines in function draw() { ... }, then write loop and start it with
requestAnimationFrame(loop).
Skills: The game loop, Functions
← Sky and ground Perspective →