Workshop › Asteroids › Step 1 of 41
Rotate, thrust and shoot through a field of breaking rocks. Angles and vectors with cos and sin, inertia, screen wrap, vector drawing and circle collisions.
We are building Asteroids: a ship that turns, thrusts and shoots through a field of breaking rocks. First the stage: a
black space, painted by a draw function.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#000000'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
draw()
```canvas is the drawing area on the page, ctx its 2D drawing tool.draw paints the whole canvas black: fillStyle picks the color, fillRect(x, y, width, height) paints.draw() at the bottom runs it once.Write the code under the three comment lines and press Run.
Skills: Drawing on a canvas