If you are still a little confused maybe it is best to learn by doing. Take a look at some of these examples, copy and past them in, and play around with things.
To make a canvas line I first need to gain a reference to a canvas element, and get a reference to the 2d drawing context after doing so I can now call the various methods that are used to draw lines with canvas. There is generating an injecting a canvas element, but for this example I will be getting a reference to a hard coded canvas element with the get method by id method.
So one way to get started with canvas lines would be to set the stroke style and begin a line by calling the begin path method. Once I have called begin path I can then use the move to method to move to a certain point in the canvas matrix. Then once I am at a good starting point I can use the line to method to create a line from the move to point to the line to point. Once done I can call the stroke method to draw the line.
So there we have a good getting started with canvas lines example. However of course there is much more to it than then when it comes to getting into many aspects of geometry, and writing all kinds of methods for drawing shapes and deterministic style animations. Also there are still a few other things to cover when it just comes to the basics so lets look at some more examples.
The moveTo method can be used to create a new sub path at the given point in the 2d drawing context. It can be thought of as a way to pick up a pen and place it down at a given location on a piece of paper, rather than dragging a pen across a piece of paper as in the case of the lineTo method.
There is the lineWidth property that can be used to set the width of a line in terms of the pixel thickness. I tend to think in terms of odd numbers when setting the thickness of a line so that there is a one pixel width line surrounded by and even thickness on each side.
The stroke method can be used in conjunction with the fill method to both stroke and fill a shape that was drawn with the moveTo and lineTo methods. This should often be used in conjunction with the close path method to ensure that the shape is always close to the starting point of the line.
The order in which the fill and stroke methods is called does matter, but it can effect the z order in which these actions take place. In other words if you want a stroke to happen on top of a fill then be sure to call the stroke method after the fill method is called like in the above example.
When it comes to drawing any kind of complex path it gets to the point where I would want to work out a way to create and draw a collection of points. When things start to get intense there are many canvas libraries that help to abstract things away, but in this section I will be covering some basics of this without the use of a library.
The first thing I would do is work out a function that will draw a standard collection of points. This standard collection of points could be a collection of objects each with an x, and y property if you prefer. However in this section I will be working with a simple linear array of number primitives which is a more efficient solution of course.
There might be a need for more than one draw points function, or to hack over something like this to add additional features such as to close the line or not, to fill or not and so forth. Still many draw points functions work in a similar fashion, give it a context and an array of points and it will draw the points for me as a line.
So now that I have a draw points function the real fun can begin when it comes to writing all kinds of methods that can be used to create an array of points that will be passed to this method.
Now that I have a draw points function worked out I can start creating all kinds of functions that create a collection of points that can then be given to the draw points function. A simple one that comes to mind is one that can be used to draw polygons for example.
So for this I just call the method, pass a center x and center y value, and then a radius and number of sides. I then have my points that form a polygon, just pass it to the draw points method with a context. As I increase the number of sides I will of course approach a circle, but this is not really a replacement for the canvas arc method,
For another example of a method that can be used as a way to create an array of points used to create a canvas line here is an exponential curve example.
It is fun to start to explore all the different possibilities when it comes to writing these kinds of methods. In any case the basic idea is the same create a collection of x and y values that will be passed to a draw function.
So now that we have the basics of drawing lines worked out, and we also touched based on the importance of separating the state of a line from the rendering of a line, lets start doing some fun stuff with animation. I will not be getting into the depth of animation and canvas here, but I will touch base on frame by frame style animation and using request animation frame to make a canvas app loop.
This canvas line animation will just be of a bunch of points from one side of the canvas to another by a standard x delta based on a set number of frames, and random y values. In other words just a basic hello words style canvas line animation example.
First off I am making use of the draw points method that I covered in the previous section. On top of that I also have a basic draw background method that is part of what is beg8inng to be a kind of draw module for a canvas example such as this.
The state object contains a current frame index value as well as a set number of frames. This is used to set the number of points in the line, but also used as a way to know the current state of the animation as it progresses forward frame by frame. There is also a last frame date value, and a frames per second value to know that amount of time that has passes sense the last update, and the number of frames to skip for each second that has passed. Then of course there is also a points array that will store the points that make up the line that is to be drawn.
I then have an initialize points method that will generate the points array.
The update method of this canvas line animation example will just update the frame index value and last frame values of the state object based on the current time. I then use that as a way to set the current index value to create a new array of points with the array slice method that is then passed to my draw points method.
Of course I have not covered everything when it comes to drawing lines with canvas. I could go on and on about everything that comes to mind about methods that are used to create arrays of points and then draw lines between them. I would never cover everything with that, the power of imagination has not bounds with that.