Workshop › Pool › Step 1 of 33
Clear the table in as few shots as you can. Velocity from an angle, friction and cushions, elastic collisions between equal balls (and why they leave at 90 degrees), pockets, a slingshot aim, smaller physics steps for fast shots, and a ghost ball that predicts the hit.
We start with the usual frame: find the canvas, take its 2D context, and a loop that paints a dark background about 60 times a second. The table goes on top of it next.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```canvas is the 480×340 canvas, ctx its pen.draw fills the whole canvas dark blue.loop draws and asks the browser to call it again before the next screen refresh; the last line starts it.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas, The game loop