O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required