The createPattern function
Patterns can be created to make self-repeating fills/strokes instead of
using a standard color or gradient. You can
use an image as the source, or a video, or another canvas
.
By using an image to cover the canvas
you could create realistic
repeating images (eg of water or sand) from just
one small image.
You don't have to use an image - other options include video
and other
canvas
tags. This allows you to draw a pattern on one
canvas
and then have that repeated as a background on another tag.
Alternatively, you could create a pattern out of a
video (that plays in the background).
Arguments to the function
- The image,
html5
video or anothercanvas
- The repetition of the image (valid values are
repeat
,repeat-x
,repeat-y
andno-repeat
(the default isrepeat
)
An example
<script>
window.onload = function ()
{
var canvas = document.getElementById('cvs');
var context = canvas.getContext('2d');
var image = new Image();
image.src = '/images/logo.png';
image.onload = function ()
{
var pattern = context.createPattern(image, 'repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, 600, 250);
}
}
</script>