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 function in the untangle.drawing.js file.

   untangleGame.drawLine = function(ctx, x1, y1, x2, y2, thickness) {    
     ctx.beginPath();
     ctx.moveTo(x1,y1);
     ctx.lineTo(x2,y2);
     ctx.lineWidth = thickness;
     ctx.strokeStyle = "#cfc";
     ctx.stroke...