Canvas - HTML5 - page 200

Pattern fills also allow you to tile (or repeat) an image. The canvas API command
createPattern(...) takes as its second parameter a string value to control the tiling.
For no tiling, use no-repeat . Currently, the only tiling value supported consistently is
repeat , which defaults to repeating the image both horizontally and vertically, as shown
in Figure 9-10 :
var img = document.getElementById("my_fish_image");
var imgfill = mycontext. createPattern (img, "repeat" );
mycontext.fillStyle = imgfill;
mycontext.fillRect(0, 0, 200, 200);
Figure 9-10. Tiling an image using a fill pattern
See Also
For more information on line styles, gradients, and pattern fills, see this canvas “styles
and colors” tutorial on MDC: https://developer.mozilla.org/En/Canvas_tutorial/Apply
ing_styles_and_colors .
9.5 Pulling External Images into a <canvas> Drawing
Problem
You have an existing image (graphic, icon, photo, etc.) in an external file that you want
to put into a canvas element, so that you can then manipulate or embellish it with
canvas API drawing commands.