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 that will be used to call the various methods that are used to draw lines with canvas.
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.
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.