Canvas method createPattern() in Javascript

The Canvas method createPattern() used to repeats the specified element in the specified direction. It returns a pattern object with specified values. The element can be an image, video, or another element.

Syntax

 1 context.createPattern(<image>, <repeat_values>);

image : It specifies the image, canvas, or video element of the pattern to use

repeat_values

1. repeat : The pattern repeats both horizontally and vertically, it is default, if not specified2. repeat-x : If specified the pattern repeats only horizontally3. repeat-y : If specified the pattern repeats only vertically4. no-repeat : If specified the pattern will be displayed only once and it does not repeat

Canvas method createPattern()

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 	<h1>The Canvas Object</h1>
 5 	<h2>Example</h2>
 6 	<img src="house_icon.ico" id="icon" width="10" height="10">
 7 	<canvas id="canvas" width="300" height="150" style="border:1px solid blue;">
 8 	  The browser does not support the HTML5 canvas element.
 9 	</canvas>
 10 	
 11 	<div>
 12 	  <button onclick="fill('repeat')">Repeat</button>
 13 	  <button onclick="fill('repeat-x')">Repeat-x</button>
 14 	  <button onclick="fill('repeat-y')">Repeat-y</button>
 15 	  <button onclick="fill('no-repeat')">No-repeat</button>
 16 	</div>
 17 	<p id="result"></p>
 18 	<script>
 19 	function fill(direction) {
 20 	  var canvas = document.getElementById("canvas");
 21 	  var ctx = canvas.getContext("2d");
 22 	  ctx.clearRect(0, 0, canvas.width, canvas.height);
 23 	  var img = document.getElementById("icon");
 24 	  var pattern = ctx.createPattern(img, direction);
 25 	  ctx.rect(0, 0, 150, 100);
 26 	  ctx.fillStyle = pattern;
 27 	  ctx.fillRect(20, 20, 150, 100);
 28 	  document.getElementById("result").innerHTML = ctx.fillStyle;
 29 	}
 30 	</script>
 31 </body>
 32 </html>