The createPattern() method is used to repeat the specified element in the specified direction. It can be an image, a video or any other canvas element.
Syntax:
context.createPattern(image, "repeat | repeat-x | repeat-y | no-repeat");
Parameters:
- image: It specifies the image, canvas, or video element of the pattern to be used.
- repeat: It repeats the pattern both horizontally and vertically. It is the default.
- repeat-x: It repeats the pattern only horizontally.
- repeat-y: It repeats the pattern only vertically.
- no-repeat: It doesn’t repeat the pattern .
Example:
<!DOCTYPE html> < html >
< head >
< title >
HTML | canvas createPattern() Method
</ title >
</ head >
< body >
< h2 style = "color:green;" > GeeksforGeeks </ h2 >
< h2 > HTML canvas createPattern() Method </ h2 >
< p style = "color:green;" >Image to be used:</ p >
< img src =
id = "geeks" width = "32" height = "32" >
< p >Canvas:</ p >
< canvas id = "myCanvas" width = "500" height = "200" style = "border:2px solid " >
</ canvas >
< br >< br >
<!-- Change the values here -->
< button onclick = "create('repeat')" >Repeat</ button >
<!-- Script to repeat the pattern -->
< script >
function create(value) {
var gfg = document.getElementById("myCanvas");
var context = gfg.getContext("2d");
context.clearRect(0, 0, gfg.width, gfg.height);
var img = document.getElementById("geeks")
var pattern = context.createPattern(img, value);
context.rect(0, 0, 150, 100);
context.fillStyle = pattern;
context.fill();
}
</ script >
</ body >
</ html >
|
Output:
-
Before clicking the button:
-
After clicking on repeat button:
Supported Browsers: The browsers supported by HTML canvas createPattern() Method are listed below:
- Chrome
- Mozilla Firefox
- Internet Explorer 9.0
- Opera
- Safari