Code
Execute
<!DOCTYPE html> <html> <head> <title>Wikitechy HTML canvas createPattern()</title> </head> <body> <h1>Wikitechy HTML canvas createPattern()</h1> <p>Image:</p> <img src="smile.jpg" id="smile" width="30" height="30"> <p> wikitechyCanvas:</p> <button onclick="draw('repeat')">Repeat</button> <button onclick="draw('repeat-x')">Repeat-x</button> <button onclick="draw('repeat-y')">Repeat-y</button> <button onclick="draw('no-repeat')">No-repeat</button> <canvas id="wikitechyCanvas" width="400" height="200" style="border:1px solid #d3d3d3;"> </canvas> <script> function draw(direction) { var p= document.getElementById("wikitechyCanvas"); var vps = p.getContext("2d"); vps.clearRect(0, 0, p.width, p.height); var img = document.getElementById("smile") var def = vps.createPattern(img, direction); vps.rect(0, 0, 200, 150); vps.fillStyle =def; vps.fill(); } </script> </body> </html>
Result
