HTML canvas createPattern() methode
Definitie en gebruik
createPattern() De methode herhaalt het opgegeven element binnen de gespecificeerde richting.
Elementen kunnen afbeeldingen, video's zijn, of andere <canvas> elementen.
De herhaalde elementen kunnen worden gebruikt om rechthoeken, cirkels of lijnen te tekenen en te vullen, enz.
Voorbeeld
Gebruikte afbeelding:
Herhaal afbeelding in horizontale en verticale richting:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
Syntax
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
Parameter value
| Parameter | Description |
|---|---|
| image | Specifies the image, canvas, or video element to be used. |
| repeat | Default. This mode repeats in both horizontal and vertical directions. |
| repeat-x | This mode repeats only horizontally. |
| repeat-y | This mode repeats only vertically. |
| no-repeat | This mode is displayed only once (not repeated). |
Browser support
The numbers in the table indicate the first browser version to fully support this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
