YouTip

# HTML Canvas `createPattern()` Method The `createPattern()` method of the Canvas 2D API creates a pattern using a specified image, canvas, or video. The pattern can be repeated in specified directions (horizontally, vertically, both, or neither) and can be used to fill or stroke shapes on the canvas. --- ## Syntax ```javascript context.createPattern(image, repetition); ``` ### Parameter Values | Parameter | Description | | :--- | :--- | | `image` | The source element to be used as the pattern. This can be an `HTMLImageElement`, `HTMLCanvasElement`, `HTMLVideoElement`, `SVGImageElement`, or an `ImageBitmap`. | | `repetition` | A string indicating how to repeat the pattern's image. | The `repetition` parameter accepts the following values: | Value | Description | | :--- | :--- | | `"repeat"` | **Default**. The pattern repeats both horizontally and vertically. | | `"repeat-x"` | The pattern repeats horizontally only. | | `"repeat-y"` | The pattern repeats vertically only. | | `"no-repeat"` | The pattern is drawn only once (no repetition). | ### Return Value * **`CanvasPattern`**: An opaque object describing a pattern. You can assign this object to the `fillStyle` or `strokeStyle` properties of the canvas context. --- ## Code Examples ### Example 1: Repeating an Image Horizontally and Vertically This example demonstrates how to create a pattern that repeats in both directions (`"repeat"`) once the source image has finished loading. ```html Your browser does not support the HTML5 canvas tag. ``` --- ### Example 2: Using an Offscreen Canvas as a Pattern You do not have to use external image files; you can also draw a pattern dynamically using another `` element. ```javascript const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // 1. Create an offscreen canvas to draw a custom pattern tile const patternCanvas = document.createElement("canvas"); patternCanvas.width = 20; patternCanvas.height = 20; const pCtx = patternCanvas.getContext("2d"); // Draw a simple red cross on the pattern tile pCtx.strokeStyle = "red"; pCtx.lineWidth = 2; pCtx.beginPath(); pCtx.moveTo(10, 0); pCtx.lineTo(10, 20); pCtx.moveTo(0, 10); pCtx.lineTo(20, 10); pCtx.stroke(); // 2. Use the offscreen canvas as a pattern on the main canvas const pattern = ctx.createPattern(patternCanvas, "repeat"); ctx.fillStyle = pattern; ctx.fillRect(0, 0, 300, 150); ``` --- ## Important Considerations ### 1. Image Loading State When using an `HTMLImageElement`, ensure that the image is fully loaded (via the `onload` event) before calling `createPattern()`. If you attempt to create a pattern from an incomplete or unloaded image, the pattern may not render at all. ### 2. Pattern Origin and Transformation By default, the pattern starts repeating from the top-left corner `(0, 0)` of the canvas coordinate system, not the top-left corner of the shape being filled. If you need to translate, rotate, or scale the pattern itself, you can use the `setTransform()` method on the returned `CanvasPattern` object: ```javascript const pattern = ctx.createPattern(img, "repeat"); const matrix = new DOMMatrix(); matrix.translateSelf(10, 10); // Shift pattern by 10px matrix.rotateSelf(45); // Rotate pattern by 45 degrees pattern.setTransform(matrix); ctx.fillStyle = pattern; ctx.fillRect(0, 0, 200, 200); ``` ### 3. Browser Compatibility The `createPattern()` method is widely supported across all modern browsers, including: * Google Chrome * Mozilla Firefox * Apple Safari * Microsoft Edge * Opera * Internet Explorer 9+ (Note: Internet Explorer 8 and earlier versions do not support the `` element).