HTML5 Game Development by Example(Second Edition)

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();