Time for action – displaying the progress level text inside the canvas element

1. We will continue using our Untangle game. Open the untangle.drawing.js JavaScript file in text editor. Add the following code after the Canvas drawing code in the gameloop function, which draws the current level and progress text inside the Canvas:

   untangleGame.drawLevelProgress = function() {
     var ctx = untangleGame.ctx;
     ctx.font = "26px Arial";
     ctx.fillStyle = "WHITE";
     ctx.textAlign = "left";
     ctx.textBaseline = "bottom";
     ctx.fillText("Puzzle "+untangleGame.currentLevel+", Completeness: " + untangleGame.levelProgress + "%", 60, ctx.canvas.height-60);
   }

2. Open the untangle.js file. We put the following code inside the gameloop function:

   untangleGame.drawLevelProgress();

3. Save the file and preview the index.html in a web browser. We will see that the text is now drawn inside the Canvas.

   

What just happened?

We have just drawn the title and the level progress text in our Canvas-based game. We draw text in the...