Workshop › Pinball › Step 1 of 42
Keep the ball alive with two flippers. A table made of line segments, bouncing a ball off any line with the closest point and the normal, bumpers that add energy, turning flippers, the relative-velocity trick that lets a flipper throw the ball, a spring launcher, and two-thumb touch controls.
Pinball is drawn on a <canvas>, 400 pixels wide and 600 tall. We take hold of it, get its 2D drawing context and
paint the whole table dark.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#0c0a09'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```document.getElementById('game') finds the canvas whose id is game.canvas.getContext('2d') gives the 2D drawing tools; we call them ctx.fillStyle picks a color, fillRect(x, y, width, height) fills a rectangle. (0, 0) is the top-left corner,
and canvas.width / canvas.height make it cover the whole canvas.Write the four lines under the three comment lines, then press Run.
Skills: Drawing on a canvas