HTML and CSS Reference
In-Depth Information
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
// 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 .
Search WWH ::

Custom Search