Drawing on the Canvas - HTML5 Canvas - page 69

The Actual Drawing

Themostbasicpathiscontrolledbyaseriesof moveTo() and lineTo() commands,asshown
in Example 2-2 .

Example 2-2. A simple line path
function

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 round

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