Workshop › 15 Puzzle › Step 7 of 27

Draw one tile

What we are doing

drawTile(number, x, y) draws a tile at a point. For now it is an orange square, and we try it on the first square.

```js
function drawTile(number, x, y) {
  ctx.fillStyle = '#f59e0b'
  ctx.fillRect(x, y, SIZE, SIZE)
}

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

  drawTile(1, squareX(0), squareY(0))
}
```

What it means

• number, x and y are parameters: the values given in the call. number is not used yet.
• The tile is a SIZE by SIZE orange square with its top-left corner at x, y.
• drawTile(1, squareX(0), squareY(0)) draws tile 1 on square 0: at (11, 60).

Your turn

1. Above function draw() {, write drawTile and leave an empty line.
2. In draw, under the fillRect line, leave an empty line and write the drawTile(...) call. Press Run.

Skills: Drawing on a canvas, Functions

← Where each square is The number on the tile →

All steps

1. A board in one list
2. The canvas and the pen
3. Paint the table
4. A function that draws
5. Row and column
6. Where each square is
7. Draw one tile
8. The number on the tile
9. All the tiles
10. Draw again and again
11. The solved board from N
12. Neighbours
13. Slide a tile
14. Click a tile
15. Arrow keys
16. Count the moves
17. Shuffle with real slides
18. Which boards can be solved?
19. Is it solved?
20. Remember the slide
21. Count the frames
22. Smooth sliding
23. Solved!
24. Show the win
25. Play again
26. A record to beat
27. Build it yourself: a timer