Z-Index in HTML Canvas

I was trying to make a simple game of snakes in JavaScript when I ran into this problem.

When the game over condition is triggered, the setInterval() loop that draws the snake is cleared, a message saying Game over and the score is displayed at the center of the canvas using ctx.fillText(). But when the snake is at the center of the screen when it dies, the game over message is drawn underneath the snake, making things look very messy. Clearing the array that holds the values for drawing the snake works, but I don’t want the snake to disappear. I just want the game over message to be drawn over it.

How can I achieve this?

Source: html5

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.