HTML and CSS Reference
In-Depth Information
Figure 2-35. repeat fill example
Example 2-26. Using the no-repeat, repeat-x, and repeat-y strings
function drawScreen() {
var fillImg = new Image();
fillImg.src = 'fill_20x20.gif';
fillImg.onload = function(){
var fillPattern1 = context.createPattern(fillImg,'no-repeat');
var fillPattern2 = context.createPattern(fillImg,'repeat-x');
var fillPattern3 = context.createPattern(fillImg,'repeat-y');
context.fillStyle = fillPattern1;
context.fillRect(0,0,100,100);
context.fillStyle = fillPattern2;
context.fillRect(0,110,100,100);
context.fillStyle = fillPattern3;
context.fillRect(0,220,100,100);
}
}
Each browser will show these patterns in a different manner.
Only Firefox seems to show anything of significance when the
repeat-x
and
repeat-y
strings are used in the
repeat
parameter. We will cover more examples of filling, as well
as many other uses for bitmap images, in
Chapter 4
.
