Here's the first of those two functions.
Nothing new here.
function display_intro_instructions () {
ctx.font= "25px Arial";
ctx.fillStyle= "red";
ctx.textAlign="center";
ctx.fillText("Press, touch or click to start", myCanvas.width / 2, myCanvas.height / 4);
}
For the game over message, I'd also like to display the score.
I could have kept count of the score as the game progressed, but in this case it's just as easy to calculate it afterwards. All we need is to loop through the pipes array and see how many of them are to the left of the bird.
Recall each pipe-half (top and bottom) has a separate entry in the pipes array, so each item we find to the left will increase the score by 0.5. Sounds dodgy, but we can guarantee the pipes come in pairs, so we can be sure this approach is solid.
function display_game_over () {
var score = 0;
for (var i=0; i < pipes.length; i++)
if (pipes[i].x < bird.x) score = score + 0.5;
ctx.font= "30px Arial";
ctx.fillStyle= "red";
ctx.textAlign="center";
ctx.fillText("Game Over", myCanvas.width / 2, 100);
ctx.fillText("Score: " + score, myCanvas.width / 2, 150);
ctx.font= "20px Arial";
ctx.fillText("Click, touch, or press to play again", myCanvas.width / 2, 300);
}