HTML5 Canvas, 2nd Edition

The Actual Drawing

The most basic path is controlled by a series of moveTo() and lineTo() commands, as shown in Example 2-2.

Example 2-2. A simple line path

function drawScreen() {
   context.strokeStyle  = "black";
   context.lineWidth  = 10;
   context.lineCap  = 'square';
   context.beginPath();
   context.moveTo(20, 0);
   context.lineTo(100, 0);
   context.stroke();
   context.closePath();

}

Figure 2-2 shows an example of this output.

Figure 2-2. A simple line path

Example 2-2 simply draws a 10-pixel-wide horizontal line (or stroke) from position 20,0 to position 100,0.

We have also added the lineCap and strokeStyle attributes. Let’s take a brief look at the various attributes we can apply to a line before we move on to some more advanced drawing. The context.stroke(); command will finalize and draw the line we have constructed.

lineCap attributes

context.lineCap

The lineCap is the end of a line drawn on the context. It can be one of three values:

butt

The default; a flat edge that is perpendicular to the edge of the line.

round

A semicircle that will have a diameter that is the length of the edge of the line.

square

A rectangle with the length of the line width and the height of half the line width, placed flat and perpendicular to the edge of the line.

lineJoin attributes

context.lineJoin

The lineJoin is the “corner” that is created when two lines meet. This is called a join. A filled triangle is created at the join, ...