Workshop › 2048 › Step 5 of 26

Numbers on the tiles

What we are doing

Every tile shows its number in the middle: dark for 2 and 4, white on the stronger colors.

```js
ctx.textBaseline = 'middle'

ctx.textAlign = 'center'

    if (value !== 0) {
      ctx.fillStyle = value <= 4 ? '#776e65' : '#f9f6f2'
      ctx.font = 'bold 40px sans-serif'
      ctx.fillText(String(value), cellX(col) + CELL / 2, cellY(row) + CELL / 2)
    }
```

What it means

textAlign = 'center' centres the text on x; textBaseline = 'middle' centres it on y. Both stay set until changed, so they are set once before the loop. (The score will be drawn between them later.)
String(value) turns the number into text; the point is the middle of the cell.

Your turn

In draw, under the board's fillRect and its empty line, write textBaseline, an empty line, and textAlign.
In the loop, under the cell's fillRect, write the if block.

Skills: Drawing on a canvas

← A color for every number Big numbers, smaller text →

All steps