Workshop › Snake › Step 6 of 28

A function that draws

What we are doing

A game redraws its picture many times a second. We put the drawing lines in a function named draw, so one word repaints everything.

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

  ctx.fillStyle = 'lime'
  ctx.fillRect(head.x * CELL, head.y * CELL, CELL, CELL)
}

draw()
```

What it means

• function draw() { ... } defines the recipe; it does not run yet.
• The lines between { and } are the body, indented by two spaces.
• draw() with parentheses runs it. Each run paints the background first, which wipes the old picture.

Your turn

Wrap the four drawing lines in function draw() { ... } (indent them by two spaces) and call draw() after it.

Skills: Functions

← Keep the position in a variable A function that moves →

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