HTML and CSS Reference
In-Depth Information
The Actual Drawing
Themostbasicpathiscontrolledbyaseriesof moveTo() and lineTo() commands,asshown
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
The lineCap is the end of a line drawn on the context. It can be one of three values:
The default; a flat edge that is perpendicular to the edge of the line.
A semicircle that will have a diameter that is the length of the edge of the line.
Search WWH ::

Custom Search