Canvas Pattern

Posted in Canvas Tutorial

Updated on May 19, 2024

By Mari Selvan

👁️ 87 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

HTML5 Canvas provides a powerful API for creating and manipulating 2D graphics directly in the browser. One of the useful features of Canvas is the ability to create and use patterns, which can add textures and complex fills to your drawings.

In this guide, we'll explore the concept of Canvas patterns, their syntax, how to create them, and some practical examples.

💡 Syntax

Creating a pattern in Canvas involves using the createPattern method of the Canvas 2D context. This method allows you to define an image (or another canvas element) as a repeating pattern.

The basic syntax is as follows:

Syntax

Copied

context.createPattern(image, repetition);

🧰 Attributes

context: The 2D drawing context obtained from a Canvas element.
image: The image, video, or another canvas element to be used as the pattern.
repetition: A string indicating how the pattern repeats. It can be one of the following values:
- repeat: The pattern repeats both horizontally and vertically.
- repeat-x: The pattern repeats only horizontally.
- repeat-y: The pattern repeats only vertically.
- no-repeat: The pattern repeats only vertically.

📄 Example

Let's create a Canvas pattern using an image:

index.html

Copied

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Pattern Example</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');
    
    const img = new Image();
    img.src = 'https://www.example.com/path/to/your/image.jpg';
    
    img.onload = function() {
      const pattern = context.createPattern(img, 'repeat');
      context.fillStyle = pattern;
      context.fillRect(0, 0, canvas.width, canvas.height);
    };
  </script>
</body>
</html>

🧠 How it works?

In this example:

We create a Canvas element with an ID of myCanvas.
We obtain the 2D drawing context of the Canvas.
We load an image and, once it's loaded, create a pattern using context.createPattern(img, 'repeat').
We use the pattern as the fillStyle for the context and fill the entire canvas with this pattern using context.fillRect.

🎉 Conclusion

Canvas patterns provide a versatile way to add rich, repeating textures and designs to your graphics. By leveraging the createPattern method, you can enhance your Canvas drawings with intricate patterns using images or other canvas elements.

This functionality opens up a myriad of possibilities for creating dynamic and visually appealing web content.