CanvasRenderingContext2D: createPattern() method
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheCanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the specified image and repetition.This method returns aCanvasPattern.
This method doesn't draw anything to the canvas directly.The pattern it creates must be assigned to theCanvasRenderingContext2D.fillStyle orCanvasRenderingContext2D.strokeStyle properties, after which it is applied to any subsequent drawing.
Syntax
createPattern(image, repetition)Parameters
imageAn image to be used as the pattern's image.It can be any of the following:
HTMLImageElement(<img>)SVGImageElement(<image>)HTMLVideoElement(<video>, by using the capture of the video)HTMLCanvasElement(<canvas>)ImageBitmapOffscreenCanvasVideoFrame
repetitionA string indicating how to repeat the pattern's image.Possible values are:
"repeat"(both directions)"repeat-x"(horizontal only)"repeat-y"(vertical only)"no-repeat"(neither direction)
A
nullvalue is treated the same as the empty string (""): both are synonyms of"repeat".
Return value
An opaqueCanvasPattern describing a pattern.
If theimage is not fully loaded (HTMLImageElement.complete isfalse), thennull is returned.
Examples
Creating a pattern from an image
This example uses thecreatePattern() method to create aCanvasPattern with a repeating source image.Once created, the pattern is assigned to the canvas context's fill style and applied to a rectangle.
The original image looks like this:
HTML
<canvas width="300" height="300"></canvas>JavaScript
const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");const img = new Image();img.src = "canvas_create_pattern.png";// Only use the image after it's loadedimg.onload = () => { const pattern = ctx.createPattern(img, "repeat"); ctx.fillStyle = pattern; ctx.fillRect(0, 0, 300, 300);};Creating a pattern from a canvas
In this example we create a pattern from the contents of an offscreen canvas.We then apply it to the fill style of our primary canvas, and fill that canvas with the pattern.
JavaScript
// Create a pattern, offscreenconst patternCanvas = document.createElement("canvas");const patternContext = patternCanvas.getContext("2d");// Give the pattern a width and height of 50patternCanvas.width = 50;patternCanvas.height = 50;// Give the pattern a background color and draw an arcpatternContext.fillStyle = "#ffeecc";patternContext.fillRect(0, 0, patternCanvas.width, patternCanvas.height);patternContext.arc(0, 0, 50, 0, 0.5 * Math.PI);patternContext.stroke();// Create our primary canvas and fill it with the patternconst canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");const pattern = ctx.createPattern(patternCanvas, "repeat");ctx.fillStyle = pattern;ctx.fillRect(0, 0, canvas.width, canvas.height);// Add our primary canvas to the webpagedocument.body.appendChild(canvas);Result
Specifications
| Specification |
|---|
| HTML # dom-context-2d-createpattern-dev |
Browser compatibility
See also
- The interface defining this method:
CanvasRenderingContext2D CanvasPattern