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;
       untangleGame.drawLine(startPoint.x, startPoint.y, endPoint.x,
       endPoint.y, thickness);
     }
   };
   
   untangleGame.drawAllCircles = function() {
     // draw all remembered circles
     for(var i=0;i<untangleGame.circles.length...