HTML5 Game Development by Example(Second Edition)

Time for action – drawing straight lines between each circle

1. Open the index.html file we just used in the circle-drawing example.
2. Change the wording in h1 from drawing circles in Canvas to drawing lines in Canvas.
3. Open the untangle.data.js JavaScript file.
4. We define a Line class to store the information that we need for each line:

   untangleGame.Line = function(startPoint, endPoint, thickness) {
     this.startPoint = startPoint;
     this.endPoint = endPoint;
     this.thickness = thickness;
   }

5. Save the file and switch to the untangle.drawing.js file.
6. We need two more variables. Add the following lines into the JavaScript file:

   untangleGame.thinLineThickness = 1;
   untangleGame.lines = [];

7. We add the following drawLine function into our code, after the existing drawCircle ...