Workshop › OutRun-style Racer › Step 1 of 44
Race down a winding road in fake 3D, the way arcade racers did it before real 3D. Perspective projection, painting from far to near, steering against the pull of curves, cars that shrink into the distance and lap times.
Arcade racers of the eighties had no 3D hardware, yet their roads rushed towards you. We will build that trick piece by piece. First the scenery: a blue sky over green ground. The line between them will be the horizon.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const W = canvas.width
const H = canvas.height
ctx.fillStyle = '#7dd3fc'
ctx.fillRect(0, 0, W, H)
ctx.fillStyle = '#15803d'
ctx.fillRect(0, H / 2, W, H / 2)
```getElementById('game') finds the canvas; getContext('2d') gives its drawing tool, ctx.W and H are the canvas size (480 × 320).fillStyle picks a color, fillRect(x, y, width, height) paints a rectangle: first the whole canvas blue, then the
lower half (from H / 2) green.Write the code under the three comment lines and press Run.
Skills: Drawing on a canvas