<!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
>
<
button
onclick
=
"create('repeat')"
>Repeat</
button
>
<
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
>