Drawing with the Canvas - HTML5 Programming for ASP.NET Developers - page 85

• Specify the end-point coordinates of the line.
• Draw the line.
Listing 4-3 shows all three operations.
Listing 4-3. Drawing a Line
context.moveTo(10, 100);
context.lineTo(190, 100);
context.stroke();
This code assumes that the context variable holds a reference to a drawing context. To draw a line
with start coordinates of (10,100) and end coordinates of (190,100), you use three methods of the drawing
context : moveTo() , lineTo() , and stroke() .
The moveTo() method moves the current drawing coordinates to specified x and y points (10 and 100
in this case). The lineTo() method specifies the end coordinates of the line (190,100 in this case). The line
isn't drawn immediately after you call the lineTo() method. You inform the drawing context that the
drawing operation is to be performed using the stroke() method. The code from Listing 4-3 results in the
line shown in Figure 4-3.
Figure 4-3. Drawing a line
The line drawn in this case assumes a default width. You can, however, change the width of the line
being drawn as explained in the next section.
Changing the Line Width and Cap
In the preceding example, you used the default values for the line width and line cap while drawing a line.
You can change these defaults using the lineWidth and lineCap properties.
The lineWidth property specifies the width of a line in pixels. All lines drawn after you set lineWidth
assume the newly specified width while rendering.
The line cap refers to how the end of a line is drawn. The lineCap property has three possible values:
butt , round , and square . The default is butt . Figure 4-4 shows the difference between the three line
endings.