Workshop › OutRun-style Racer › Step 4 of 44

One piece of road

What we are doing

On screen the road is made of trapezoids: the near edge wide and low, the far edge narrow and higher up. quad paints one. To try it, we draw the piece of road from 1000 to 3000 units in front of the camera.

```js
function quad(color, x1, y1, w1, x2, y2, w2) {
  ctx.fillStyle = color
  ctx.beginPath()
  ctx.moveTo(x1 - w1, y1)
  ctx.lineTo(x2 - w2, y2)
  ctx.lineTo(x2 + w2, y2)
  ctx.lineTo(x1 + w1, y1)
  ctx.fill()
}

  const near = project(0, -CAMERA_HEIGHT, 1000)
  const far = project(0, -CAMERA_HEIGHT, 3000)
  quad('#6b7280', near.x, near.y, near.w, far.x, far.y, far.w)
```

What it means

quad takes the middle and half width of a near edge (x1, y1, w1) and of a far edge (x2, y2, w2).
beginPath starts a shape, moveTo puts the pen on the first corner, each lineTo draws to the next corner, and fill paints the inside.
near and far are the two edges of the test piece, projected to the screen.

Your turn

Above function draw() { write quad, with an empty line between.
In draw, under the green ground line, leave an empty line and write the three test lines.

Skills: Drawing on a canvas

← Perspective A road made of segments →

All steps