HTML Canvas - createPattern() Method

Quiz

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'

S.No

Parameter & Description

object

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

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 −

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 −

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_colors_and_styles.htm

Print Page