HTML Canvas - createPattern() Method

The HTML Canvas createPattern() method creates a pattern using the specific graphic and renders it onto the Canvas element by repeating it based on the parameters passed.

Syntax

Following is the syntax of HTML Canvas createPattern() method −

CanvasRenderingContext2D.createPattern(object, repetition);

Parameters

Following is the list of parameters of this method −

S.No Parameter & Description
1

object

An image object or any available graphic from the Canvas element to use for the pattern.
2

repetition

A string value indicating the pattern image. Accepted values are -

  • 'repeat'

  • 'repeat-x'

  • 'repeat-y'

  • 'no-repeat'

Return value

The method when called by the context object renders a pattern onto the Canvas with the specified repetition value.

Example

The following example takes a logo and prints a pattern onto the Canvas element context until it spaces out using HTML Canvas createPattern() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="500" height="400" style="border: 1px solid black; background-color: black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.src = 'https://www.tutorialspoint.com/green/images/diamond.png';
      image.onload = function() {
         var pattern = context.createPattern(image, 'repeat');
         context.fillStyle = pattern;
         context.fillRect(0, 0, canvas.width, canvas.height);
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

HTML Canvas createPattern Method

Example

The following example repeats the given image only on the horizontal side using the createPattern() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="700" height="400" style="border: 1px solid black; "></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.src = 'https://www.tutorialspoint.com/images/logo.png';
      image.onload = function() {
         var pattern = context.createPattern(image, 'repeat-x');
         context.fillStyle = pattern;
         context.fillRect(0, 0, canvas.width, canvas.height);
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

HTML Canvas createPattern Method

Example

The following example repeats the given image only on the vertical side using the createPattern() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="500" height="400" style="border: 1px solid black; "></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var image = new Image();
      image.src = 'https://www.tutorialspoint.com/images/logo.png';
      image.onload = function() {
         var pattern = context.createPattern(image, 'repeat-y');
         context.fillStyle = pattern;
         context.fillRect(0, 0, canvas.width, canvas.height);
      }
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

HTML Canvas createPattern Method
html_canvas_colors_and_styles.htm
Advertisements