Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 42

At the point where the line ends, you can continue drawing more lines by adding more
lineTo methods, as in the following example:
ctxt.beginPath();
ctxt.moveTo(10, 10);
ctxt.lineTo(225, 350);
ctxt.lineTo(300, 10);
ctxt.lineTo(400, 350);
ctxt.stroke();
Run this code and look at the output. You get a graphic that resembles Figure 1-28. You
might use straight lines in this way when plotting connected points on a line graph, for
example.
FIGURE 1-28 A polyline drawn on the canvas
Exploring the stroke method in more depth is worth the effort. If you were creating a chart
or a graph, you might want to change the color of your lines so that they stand out from the
axis. You might want to change the thickness. You do this by changing some properties on
the context object before calling the stroke method:
ctxt.lineWidth = 5;
ctxt.strokeStyle = '#0f0';
The lineWidth property accepts a value that determines the line width. The strokeStyle
property lets you change the line color. This property accepts all the common style formats
for specifying colors in HTML, including hexadecimal values or named colors. These changes
produce a new, more attractive output, as shown in Figure 1-29.