Workshop › Chess › Step 7 of 48

An outline for white

What we are doing

White pieces fade into the light squares. Give them a dark outline: strokeText draws only the edge of the letters. The outline goes first and the white fill on top, otherwise the thick line would cover the thin parts of the symbol.

```js
        ctx.textBaseline = 'middle'
        // White pieces get a dark outline, drawn first so the white fill goes on top of it.
        if (piece[0] === 'w') {
          ctx.strokeStyle = '#0f172a'
          ctx.lineWidth = 3
          ctx.strokeText(GLYPHS[piece[1]], x + SQ / 2, y + SQ / 2 + 3)
        }
        ctx.fillStyle = piece[0] === 'w' ? '#f8fafc' : '#0f172a'
```

What it means

strokeStyle is the line color, lineWidth its thickness.
strokeText draws the outline of the text at the same place the fill will go.
Only white pieces get it (piece[0] === 'w').

Your turn

Write the comment and the if block between ctx.textBaseline = 'middle' and the fillStyle line.

Skills: Drawing on a canvas

← Draw the pieces Draw again and again →

All steps