HTML5 Game Development by Example : Beginner's Guide - Second Edition

Time for action – dragging the circles in the Canvas

1. Let's continue with our previous code. Open the html5games.untangle.js file.
2. We need a function to clear all the drawings in the Canvas. Add the following function to the end of the untangle.drawing.js file:

   untangleGame.clear = function() {
     var ctx = untangleGame.ctx;
     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
   };

3. We also need two more functions that draw all known circles and lines. Append the following code to the untangle.drawing.js file:

   untangleGame.drawAllLines = function(){ // draw all remembered lines for(var i=0;i<untangleGame.lines.length;i++) { var line = untangleGame.lines[i]; var startPoint = line.startPoint; var endPoint = line.endPoint; var thickness = line.thickness; ...