Canvas - Introducing HTML5 - page 149

ctx.fillStyle = ctx.createPattern(this, 'repeat');
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
img.src = 'remysharp_avatar.jpg';
FIguRE 5.8 Tiling an
image on a canvas using the
createPattern method.
In this example I've created an image on the ly using document.
createElement . Only after the onload event ires do I continue
to build the pattern ill. You need to wait until all the image data
has loaded before you can begin to use it.
Now that the image is loaded, I'm able to set the fillStyle
using createPattern . I've used createPattern(this, 'repeat') ,
and this refers to the image that ired the load event, but I
can just as easily use another canvas as the source. The string
'repeat' follows the same syntax as CSS background-repeat , in
that repeat-x , repeat-y , and no-repeat also work.
If you use CSS to change the canvas element's size, this will
simply stretch the canvas. This doesn't actually do anything to
the pixels in the canvas, only the canvas DOM node as you can
see in Figure 5.9 . If you were to draw something to the canvas
and change the canvas element's height or width property (say
you wanted to change the default 300x150 dimensions) it will
blank out the contents of the canvas, and also reset the state of
your drawing ill styles, stroke styles, line width, and so on. This
efectively does a reset on your canvas, a trick or a problem
depending on your point of view.