Workshop › Snake › Step 3 of 28

Paint the board

What we are doing

Now we draw for the first time: the whole canvas gets a dark background, the board the snake will move on.

```js
ctx.fillStyle = '#111'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```

What it means

• ctx.fillStyle = '#111' picks the fill color: #111 is almost black.
• ctx.fillRect(x, y, width, height) fills a rectangle. 0, 0 is the top-left corner; canvas.width and canvas.height (400 and 400) make it cover everything.

Your turn

Leave an empty line under const ctx = ..., write the two lines, then press Run.

Skills: Drawing on a canvas

← Get the pen Think in cells →

All steps

1. Find the canvas
2. Get the pen
3. Paint the board
4. Think in cells
5. Keep the position in a variable
6. A function that draws
7. A function that moves
8. The game loop
9. Slow it down
10. A direction to move in
11. Steer with the arrow keys
12. A body made of a list
13. Move the whole body
14. Pick a spot for the food
15. Draw the food
16. Eat and grow
17. Never put food on the snake
18. A table of turns
19. No U-turns
20. Crash into the walls
21. Crash into yourself
22. The game over message
23. Show the score
24. One function that starts a game
25. Play again with Space
26. Remember the best score
27. Speed up as you grow
28. Build it yourself: through the walls