HTML and CSS Reference
In-Depth Information
}
}
Figure 2-35. Repeat fill example
It is best not to use
Image
instances until they have loaded completely. We will cover this in
will be called when
Image
is ready to be used. The
repeat
pattern string does a good job of
completely filling the 200×200 square. Let'ssee the code forhowthe other repeat strings per-
form (in
Example 2-26
), and view the results in
Figure 2-36
through
Figure 2-38
.
Example 2-26. Using the no-repeat, repeat-x, and repeat-y strings
function
function
drawScreen
() {
var
var
fillImg
=
new
new
Image
();
fillImg
.
src
=
'fill_20x20.gif'
;
fillImg
.
onload
=
function
function
(){
var
var
fillPattern1
=
context
.
createPattern
(
fillImg
,
'no-repeat'
);
var
var
fillPattern2
=
context
.
createPattern
(
fillImg
,
'repeat-x'
);
var
var
fillPattern3
=
context
.
createPattern
(
fillImg
,
'repeat-y'
);
context
.
fillStyle
=
fillPattern1
;
context
.
fillRect
(
0
,
0
,
100
,
100
);
context
.
fillStyle
=
fillPattern3
;
context
.
fillRect
(
0
,
220
,
100
,
100
);