Workshop › Wordle-style Word Guess › Step 9 of 26

Show the letters

What we are doing

The typed letters go into the first row, big and upper case, centered in their tiles. A tile with a letter gets a brighter outline.

```js
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'

for (let row = 0; row < TRIES; row++) {
  const letters = row === 0 ? current : ''

    ctx.strokeStyle = letters[i] ? '#a1a1aa' : '#3f3f46'

    if (letters[i]) {
      ctx.fillStyle = 'white'
      ctx.font = 'bold 28px sans-serif'
      ctx.fillText(letters[i].toUpperCase(), x + SIZE / 2, y + SIZE / 2 + 1)
    }
```

What it means

Text is centered both ways on the point it is drawn at.
letters is what this row shows: the typed letters on the first row, nothing on the others.
letters[i] is the i-th letter, or undefined when there is none, which counts as false.
toUpperCase() shows the letter as a capital.

Your turn

In draw, under the fillRect line, write the two text settings (no empty line between).
Under the row loop's first line, write const letters ....
Change the strokeStyle line, and under strokeRect write the if (letters[i]) block. Press Run and type.

Skills: Drawing on a canvas

← Type with the keyboard Backspace →

All steps