Using Patterns

We can create patterns using the createPattern method. The 2D drawing context defines support for three types of pattern:

image
video
canvas

createPattern method needs two parameters:

HTMLImageElement
the repeat style

The repeat style must be one of the values shown in the following table:

Value	Description
repeat	The image should be repeated vertically and horizontally
repeat-x	The image should be repeated horizontally
repeat-y	The image should be repeated vertically
no-repeat	The image should not be repeated in the pattern

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canvas {
      border: thin solid black;
      margin: 4px
}
</style>
</head>
<body>
      <canvas id="canvas" width="500" height="140"> 
      Your browser doesn't support the <code>canvas</code> element 
      </canvas>
      <img id="myID" hidden src="http://java2s.com/Book/HTML-CSSImages/star.png" />
      <script>
            var ctx = document.getElementById("canvas").getContext("2d");
            var imageElem = document.getElementById("myID");
            var pattern = ctx.createPattern(imageElem, "repeat");
            ctx.fillStyle = pattern;
            ctx.fillRect(20, 20, 500, 140);
      </script>
</body>
</html>

Click to view this demo.