HTML and CSS Reference
In-Depth Information
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 200, 200);
});
img.src = "images/pattern.png";
This code creates a new instance of an
Image
object and sets its
src
property to an image that is to be
used for pattern filling. The
load
event handler of the
Image
creates a pattern using the drawing context's
createPattern()
method. The first parameter of
createPattern()
is the image to be used, and the second
parameter indicates a repeat direction. The possible values for the repeat direction are
repeat-x
(repeat
horizontally),
repeat-y
(repeat vertically), and
repeat
(repeat in both the directions). The
fillStyle,
property is then set to the newly created pattern object. Finally, a filled rectangle is drawn. Figure 4-21
shows how the rectangle is filled with a sample pattern.
Figure 4-21.
Filling a rectangle with a pattern
Saving the Canvas State
So far, you've been playing with the canvas by performing various drawing operations on it. Many times,
you need to change the state of the canvas between drawing operations. For example, assume that you
have a canvas with settings such as
lineWidth
and
fillStyle,
set to some values. Now you wish to draw
three rectangles on the canvas. However,
lineWidth
and
fillStyle,
are different for all of them. In this case,
you set the context properties for the first rectangle and then draw the rectangle. Doing so causes the
original values to be overwritten. You repeat the same process to draw the other two rectangles. Now, if you
wish to return the canvas to the original state it was in before you began drawing the three rectangles, you
have to set those properties again because they were overwritten by the subsequent drawing operations.
Saving the canvas state allows you to restore it at some later stage.
The term
state
can be bit misleading. Here, the
canvas state
means settings such as the
strokeStyle
,
fillStyle,
,
lineWidth
,
lineCap
,
shadowOffsetX
,
shadowOffsetY
,
shadowBlur
, and
shadowColor
properties and
a few other settings. You may want to save a snapshot of the canvas settings at a given point of time so you
can revert back to those settings later in the current browser session. To perform these tasks, the drawing
