HTML and CSS Reference
In-Depth Information
Figure 4-10.
Drawing a smiley
Notice the use of two methods not used so far
:
closePath()
and
fill()
. The
closePath()
method
closes a path by joining the start point of the first drawing operation and the end point of the last drawing
operation. Thus to draw a triangle, you need to draw only two lines using
lineTo()
; calling
closePath()
draws the third side of the triangle. Until now, you used the
stroke()
method to draw an
outline of a shape. The
fill()
method fills the shape with a color. Of course, you can use
stroke()
as well as
fill()
with a single shape. The
strokeStyle
and
fillStyle
properties can be used to specify a color with
which the outlining or filling operation should be performed. Figure 4-11 shows how a filled triangle is
rendered as a result of running the code from Listing 4-8.
Figure 4-11.
Drawing a filled triangle
