Workshop › Chess › Step 6 of 48

Draw the pieces

What we are doing

The pieces are drawn as text: Unicode has chess symbols (♚ ♛ ♜ ♝ ♞ ♟). An object GLYPHS gives the symbol for each kind; after painting a square, draw writes the symbol of the piece on it, white or black.

```js
const GLYPHS = { K: '♚', Q: '♛', R: '♜', B: '♝', N: '♞', P: '♟' }

      ctx.fillRect(x, y, SQ, SQ)
      const piece = board[r][c]
      if (piece) {
        ctx.font = '44px serif'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillStyle = piece[0] === 'w' ? '#f8fafc' : '#0f172a'
        ctx.fillText(GLYPHS[piece[1]], x + SQ / 2, y + SQ / 2 + 3)
      }
```

What it means

GLYPHS is an object: name: value pairs. GLYPHS['N'] is '♞'.
if (piece) is true when the square is not ''.
font, textAlign = 'center' and textBaseline = 'middle' put the text's center on the given point.
fillText(text, x, y) writes it; x + SQ / 2 is the middle of the square, + 3 nudges the symbol down to look centered.

Your turn

Under the TOP line write GLYPHS.
In draw, right under ctx.fillRect(x, y, SQ, SQ) (inside both loops) write the piece lines.

Skills: Drawing on a canvas

← Color and kind An outline for white →

All steps