Workshop › Angry Birds-style Slingshot › Step 40 of 47

The end panel

What we are doing

When the game is won or lost, a dark see-through panel in the middle says so: Level cleared! or Out of birds, and how to play again.

```js
if (state === 'won' || state === 'lost') {
  ctx.fillStyle = 'rgba(15, 23, 42, 0.8)'
  ctx.fillRect(130, 110, 300, 80)
  ctx.fillStyle = 'white'
  ctx.textAlign = 'center'
  ctx.font = 'bold 22px sans-serif'
  ctx.fillText(state === 'won' ? 'Level cleared!' : 'Out of birds', canvas.width / 2, 145)
  ctx.font = '15px sans-serif'
  ctx.fillText('Space or tap to play again', canvas.width / 2, 172)
}
```

What it means

The panel is a 300×80 rectangle, 80% opaque, in the middle of the canvas.
textAlign = 'center' makes x the middle of the text, so canvas.width / 2 centers it.
state === 'won' ? ... : ... picks the message.

Your turn

At the end of draw, under the Birds ... Score line, write the panel.

Skills: Drawing on a canvas

← Won or lost Play again →

All steps