Drawing on the Canvas - HTML5 Canvas - page 119

}

}

Figure 2-35. Repeat fill example

It is best not to use Image instances until they have loaded completely. We will cover this in
detailin Chapter 4 ,butfornow,wesimplycreateaninline onload eventhandlerfunctionthat
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 );