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

8. Then we define a new function that iterates the circle list and draws a line between each pair of circles. Append the following code in the JavaScript file:

   untangleGame.connectCircles = function() {
     // connect the circles to each other with lines
     untangleGame.lines.length = 0;
     for (var i=0;i< untangleGame.circles.length;i++) {
       var startPoint = untangleGame.circles[i];
       for(var j=0;j<i;j++) {
         var endPoint = untangleGame.circles[j];
         untangleGame.drawLine(startPoint.x, startPoint.y, endPoint.x,
         endPoint.y, 1);
         untangleGame.lines.push(new untangleGame.Line(startPoint, endPoint,
         untangleGame.thinLineThickness));
       }
     }
   };

9. Finally, we open the untangle.js file, and add the following code before the end of the jQuery document ready function, after we have called the untangleGame.createRandomCircles function:

   untangleGame.connectCircles();

10. Test the code in the web browser. We should see there are lines connected to each randomly placed circle:
    

What just happened?

We have enhanced our code with lines connecting each generated circle. You may find a working example at the following URL:

http://makzan.net/html5-games/untangle-wip-connect-lines/

Similar to the way we saved the circle position, we have an array to save every line segment we draw. We declare a line class definition to store some essential information of a line segment. That is, we save the start and end point and the thickness of the line.

Introducing the line drawing API

There are some drawing APIs for us to draw and style the line stroke:

We usually draw lines by using the moveTo and lineTo pairs. Just like in the real world, we move our pen on top of the paper to the starting point of a line and put down the pen to draw a line. Then, keep on drawing another line or move to the other position before drawing. This is exactly the flow in which we draw lines on the Canvas.

Note

We just demonstrated how to draw a simple line. We can set different line styles to lines in the Canvas. For more details on line styling, please read the styling guide in W3C at http://www.w3.org/TR/2dcontext/#line-styles and the Mozilla Developer Center at https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors.