Open the index.html file we just used in the circle-drawing example.

Change the wording in h1 from drawing circles in Canvas to drawing lines in Canvas.

Open the untangle.data.js JavaScript file.

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

Save the file and switch to the untangle.drawing.js file.

We need two more variables. Add the following lines into the JavaScript file:

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

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