Workshop › 15 Puzzle › Step 8 of 27

The number on the tile

What we are doing

Now the tile gets its number, dark and bold, right in the middle.

```js
function drawTile(number, x, y) {
  ctx.fillStyle = '#f59e0b'
  ctx.fillRect(x, y, SIZE, SIZE)
  ctx.fillStyle = '#1c1917'
  ctx.font = 'bold 36px sans-serif'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(String(number), x + SIZE / 2, y + SIZE / 2 + 2)
}
```

What it means

textAlign = 'center' centers the text left to right, textBaseline = 'middle' top to bottom.
x + SIZE / 2, y + SIZE / 2 is the middle of the tile; + 2 nudges it down a little, which looks more centered.
String(number) turns the number into text.

Your turn

In drawTile, under the fillRect line, write the five lines. Press Run.

Skills: Drawing on a canvas

← Draw one tile All the tiles →

All steps