HTML Canvas createPattern() Method: Creating Repeating Patterns
The HTML Canvas createPattern() method is a powerful feature that allows you to fill or stroke shapes with repeating patterns. These patterns can be created using images or other canvas elements, enabling you to add complex and visually engaging textures to your canvas drawings. This article will guide you through the syntax, attributes, and practical examples of using createPattern(), enhancing your understanding and application of the Canvas API.
What is the createPattern() Method?
The createPattern() method is part of the Canvas 2D rendering context, and its primary purpose is to generate a pattern object that can then be used as a fill or stroke style. This method takes an image, video, or another canvas as its source, and repeats this source to create a seamless pattern. Unlike a solid color, patterns add depth and complexity to your graphical designs.
Purpose of the createPattern() Method
The main purposes of using the createPattern() method are to:
- Add Texture: Fill shapes with textures derived from images or canvases.
- Create Custom Backgrounds: Design unique and repeating backgrounds.
- Enhance Visuals: Make your canvas graphics more engaging and visually appealing.
- Reduce Complexity: Create complex textures from a single source, reducing code complexity.
Understanding the Syntax
The createPattern() method has the following syntax:
ctx.createPattern(image, repetition);
Parameters
The createPattern() method accepts two parameters:
| Parameter | Type | Description |
|---|---|---|
image |
HTMLImageElement, HTMLVideoElement, HTMLCanvasElement | The source of the pattern. Can be an image, video, or another canvas. |
repetition |
String | A string that specifies how the pattern should repeat. Possible values: repeat, repeat-x, repeat-y, no-repeat. |
Return Value
The createPattern() method returns a CanvasPattern object. This object represents the pattern, and you can assign it to the fillStyle or strokeStyle property of the canvas context.
Practical Examples of createPattern()
Let's explore practical examples using the createPattern() method. Each example will demonstrate a different use case, starting with basic applications and progressing to more advanced ones.
Basic Pattern with an Image
In this example, we'll create a simple repeating pattern using an image.
<canvas
id="canvasPatternImage"
width="300"
height="200"
style="border: 1px solid black;"
></canvas>
<script>
//<![CDATA[
const canvas_pattern_image = document.getElementById("canvasPatternImage");
const ctx_pattern_image = canvas_pattern_image.getContext("2d");
const img = new Image();
img.src = "https://dummyimage.com/50x50/4a90e2/fff";
img.onload = function () {
const pattern = ctx_pattern_image.createPattern(img, "repeat");
ctx_pattern_image.fillStyle = pattern;
ctx_pattern_image.fillRect(0, 0, canvas_pattern_image.width, canvas_pattern_image.height);
};
//]]]]><![CDATA[>
</script>
Note: Always ensure your image is fully loaded before creating a pattern. Use the onload event for this purpose. 💡
Repeating Horizontally with repeat-x
Here, we will repeat the pattern only horizontally using the repeat-x property.
<canvas
id="canvasPatternX"
width="300"
height="200"
style="border: 1px solid black;"
></canvas>
<script>
//<![CDATA[
const canvas_pattern_x = document.getElementById("canvasPatternX");
const ctx_pattern_x = canvas_pattern_x.getContext("2d");
const img_x = new Image();
img_x.src = "https://dummyimage.com/50x50/4a90e2/fff";
img_x.onload = function () {
const pattern_x = ctx_pattern_x.createPattern(img_x, "repeat-x");
ctx_pattern_x.fillStyle = pattern_x;
ctx_pattern_x.fillRect(0, 0, canvas_pattern_x.width, canvas_pattern_x.height);
};
//]]]]><![CDATA[>
</script>
Repeating Vertically with repeat-y
This example will show how to repeat the pattern only vertically with repeat-y.
<canvas
id="canvasPatternY"
width="300"
height="200"
style="border: 1px solid black;"
></canvas>
<script>
//<![CDATA[
const canvas_pattern_y = document.getElementById("canvasPatternY");
const ctx_pattern_y = canvas_pattern_y.getContext("2d");
const img_y = new Image();
img_y.src = "https://dummyimage.com/50x50/4a90e2/fff";
img_y.onload = function () {
const pattern_y = ctx_pattern_y.createPattern(img_y, "repeat-y");
ctx_pattern_y.fillStyle = pattern_y;
ctx_pattern_y.fillRect(0, 0, canvas_pattern_y.width, canvas_pattern_y.height);
};
//]]]]><![CDATA[>
</script>
No Repetition with no-repeat
Here is an example, where we specify not to repeat the pattern using no-repeat.
<canvas
id="canvasPatternNoRepeat"
width="300"
height="200"
style="border: 1px solid black;"
></canvas>
<script>
//<![CDATA[
const canvas_pattern_norepeat = document.getElementById("canvasPatternNoRepeat");
const ctx_pattern_norepeat = canvas_pattern_norepeat.getContext("2d");
const img_norepeat = new Image();
img_norepeat.src = "https://dummyimage.com/100x100/4a90e2/fff";
img_norepeat.onload = function () {
const pattern_norepeat = ctx_pattern_norepeat.createPattern(
img_norepeat,
"no-repeat"
);
ctx_pattern_norepeat.fillStyle = pattern_norepeat;
ctx_pattern_norepeat.fillRect(
0,
0,
canvas_pattern_norepeat.width,
canvas_pattern_norepeat.height
);
};
//]]]]><![CDATA[>
</script>
Pattern with Another Canvas
In this advanced example, we will use another canvas as the pattern source.
<canvas id="patternSource" width="50" height="50" style="border: 1px solid #ddd; display: none;"></canvas>
<canvas id="canvasPatternCanvas" width="300" height="200" style="border: 1px solid black;"></canvas>
<script>
//<![CDATA[
// Create the source canvas
const patternSourceCanvas = document.getElementById("patternSource");
const patternSourceCtx = patternSourceCanvas.getContext("2d");
patternSourceCtx.fillStyle = "red";
patternSourceCtx.fillRect(0, 0, 25, 25);
patternSourceCtx.fillStyle = "blue";
patternSourceCtx.fillRect(25, 25, 25, 25);
// Use source canvas as pattern
const canvas_pattern_canvas = document.getElementById("canvasPatternCanvas");
const ctx_pattern_canvas = canvas_pattern_canvas.getContext("2d");
const pattern_canvas = ctx_pattern_canvas.createPattern(
patternSourceCanvas,
"repeat"
);
ctx_pattern_canvas.fillStyle = pattern_canvas;
ctx_pattern_canvas.fillRect(0, 0, canvas_pattern_canvas.width, canvas_pattern_canvas.height);
//]]]]><
