The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the specified image (a CanvasImageSource). It repeats the source in the directions specified by the repetition argument. This method returns a CanvasPattern.


CanvasPattern <var>ctx.createPattern(image, repetition);</var>


A CanvasImageSource to be used as image to repeat. It can either be a:
A DOMString indicating how to repeat the image. Possible values are:
  • "repeat" (both directions),
  • "repeat-x" (horizontal only),
  • "repeat-y" (vertical only), or
  • "no-repeat" (neither).
If repetition is an empty string ('') or null (but not undefined), repetition will be "repeat".

Return value

An opaque object describing a pattern.


Using the createPattern method

This is just a simple code snippet which uses the createPattern method to create a CanvasPattern with the specified image and repetition. Once created, you can use the CanvasPattern.setTransform() method to transform the pattern. The pattern gets applied if you set it as the current fillStyle and gets drawn onto the canvas when using the fillRect() method, for example.


<canvas id="canvas"></canvas>


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.src = '';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;

Edit the code below and see your changes update live in the canvas:


Specification Status Comment
WHATWG HTML Living Standard
The definition of 'CanvasRenderingContext2D.createPattern' in that specification.
Living Standard  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Compatibility notes

  • Starting with Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), specifying a null or undefined image correctly throws a TYPE_MISMATCH_ERR exception.
  • Starting with Gecko 16.0 (Firefox 16.0 / Thunderbird 16.0 / SeaMonkey 2.13), specifying null for the repetition parameter is now allowed and results in the repetition being set to "repeat" (bug 762657).

See also


© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

API Canvas CanvasRenderingContext2D Method Reference