HTML and CSS Reference
In-Depth Information
For example, to load an image named
texture.jpg
and apply it to the
fillStyle
property so
that it tiles on both the x- and y-axes, you would write code like this:
var
var
patternImage
=
new
new
Image
();
patternImage
.
src
=
"texture.jpg"
patternImage
.
onload
=
function
function
() {
var
var
pattern
=
context
.
createPattern
(
patternImage
,
"repeat"
);
context
.
fillStyle
=
pattern
;
...
}
PATTERNS WITH VIDEO: THE BAD NEWS
The HTML5 Canvas API specifies that an HTML5
video
element can be used as the source for
createPattern()
instead of an image. However, all of our attempts to do so emitted the following
JavaScript error:
Uncaught
Error
:
TYPE_MISMATCH_ERR
:
DOM Exception
17
Accordingtothe
DOMreference
,DOMException17,TYPE_MISMATCH_ERRoccurs“ifthetype
of an object is incompatible with the expected type of the parameter associated to the object.”
So it appears that most browsers have not included support for using video as the pattern for
cre-
atePattern()
.However,youcanstillloadandplayvideoonCanvas,whichwewilldiscussindepth
