Workshop › Typing Rain › Step 14 of 33

Half a word in yellow

What we are doing

The typed part of the target is drawn in yellow and the rest in white. There is no "color half a word" command, so we draw two pieces: the typed part at x, and the rest starting exactly where the first piece ends.

```js
for (const w of words) {
  // The typed part in yellow, the rest in white right after it.
  const done = w === target ? w.text.slice(0, typed) : ''
  ctx.fillStyle = '#facc15'
  ctx.fillText(done, w.x, w.y)
  ctx.fillStyle = w === target ? '#ffffff' : '#cbd5e1'
  ctx.fillText(w.text.slice(done.length), w.x + ctx.measureText(done).width, w.y)
}
```

What it means

slice(0, typed) is the first typed letters; for words that are not the target, done is empty.
The rest, slice(done.length), starts at x plus the measured width of done.
The target's rest is white, other words stay light grey.

Your turn

In draw, replace the '#cbd5e1' color line and the one-line for with the new loop.

Skills: Drawing on a canvas

← Letter by letter Let go of a lost word →

All steps