Lines are obviously some of the most basic shapes in drawings. It's really easy to draw the on the Canvas:
context.lineTo(x, y);
where (x,y) are the coordinates of the end of the line.
Sounds simple, but what about the beginning of the line?
Here's how it works:
First, you 'begin a path':
context.beginPath();
This tells the system that you started drawing a new shape.
Next you place the virtual 'pen' somewhere on the Canvas:
context.moveTo(x1, y1);
This will be the starting point for the line, which is added using:
context.lineTo(x2, y2);
This creates a line between (x1, y1) and (x2, y2). Now our pen is at (x2, y2) and you can either:
- pick it up and put it somewhere else (using moveTo) or
- draw another line (using lineTo) - from (x2, y2) to (x3, y4).
You repeat the step above until your shape is ready. At that point you draw the complete path:
context.stroke();
Please keep in mind that the path can include various shapes, including various curves and rectangles.
The executable example it the text box above has a very simple example that draws a path consisting of a line and a rectangle.
But what happens if we cut line [3] of the code (the one that draws the line to 350, 50) and move it line [5], which was originally empty?
Now our code looks like this:
Now, instead of drawing the line from the point in the upper left part of the Canvas, the program is drawing it from the upper left corner of the rectangle.
That's because the rectangle is a part of our path. The code first [2] moves the pen to (10, 30), but next it moves it to (220, 200) to draw the rectangle.
When the rectangle is finished, the pen is again at (220, 200), so that's where the line drawn in [5] starts.
This example illustrates (pun intended) the importance of sequence in drawing a path.