User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 308

• lineTo(x,y) : Draws a line segment to a coordinate on the canvas
• stroke() : Colors the line
• fill() : Fills in the shape created by the line segments
The beginPath() method is first used to tell the canvas that a new shape is
being drawn, which consists of line segments. The moveTo() and lineTo() meth-
ods are then used to move around the canvas and draw line segments. Lastly, the
closePath() method is used to complete a line and connect the beginning and end-
ing points if the line is filled. For example, to create a triangle a path is begun, the draw-
ing point is moved, two lines are drawn, and the path is closed, filled, and outlined:
…
context.beginPath(); // start a new line
context.moveTo(50,50); // move to 50 pixels from
the left and top edge of the canvas
context.lineTo(150,50); // draw a line to 150 and 50
pixels from the left and top edge
context.lineTo(100,150); // draw a line to 100 and
150 pixels from the left and top edge
context.closePath(); // close the line
context.fill(); // fill the shape formed by
the line with the fill style color
context.stroke(); // outline the line with the

stroke style color
…

Used in place of the rectangle drawing code earlier, this results in the triangle shown
in Figure 7-8 .