Workshop › Tower Defense › Step 35 of 42

The game over screen

What we are doing

When the game is over, a dark see-through layer covers the board, with the result on it.

```js
ctx.textAlign = 'center'
if (state === 'over') {
  ctx.fillStyle = 'rgba(15, 23, 42, 0.8)'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = 'white'
  ctx.font = 'bold 32px sans-serif'
  ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2)
  ctx.font = '18px sans-serif'
  ctx.fillText('Survived ' + (wave - 1) + ' waves (best ' + best + ')', canvas.width / 2, canvas.height / 2 + 30)
  ctx.fillText('Press Space to play again', canvas.width / 2, canvas.height / 2 + 56)
}
```

What it means

rgba(15, 23, 42, 0.8) is dark blue at 80%: the board still shows faintly under it.
It is drawn last, so it covers everything drawn before it.
The parentheses in (wave - 1) do the subtraction before the text is joined.

Your turn

At the end of draw, under the Gold line, write the block.

Skills: Drawing on a canvas

← The most waves survived Play again →

All steps