HTML and CSS Reference
In-Depth Information
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:
ing_styles_and_colors .
9.5 Pulling External Images into a <canvas> Drawing
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.
Search WWH ::

Custom Search