Workshop › Breakout › Step 1 of 39
Smash a wall of bricks with a ball and a mouse-driven paddle. Nested loops, circle-versus-box collision, lives and serving, and particle effects.
Breakout is played on a <canvas> 480 pixels wide and 400 tall. We paint it dark blue and draw the paddle, a light
bar near the bottom.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const PADDLE_W = 80
const PADDLE_H = 12
const PADDLE_Y = 370
let paddle = { x: 200 }
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#e2e8f0'
ctx.fillRect(paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H)
```canvas is the #game element; ctx is its 2D drawing context.PADDLE_W, PADDLE_H and PADDLE_Y are the paddle's width, height and distance from the top.paddle is an object whose x (the left edge) will change later.fillStyle, then fillRect(x, y, width, height).Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas