CanvasRenderingContext2D.createPattern()

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.

Syntax

CanvasPattern ctx.createPattern(image, repetition);

Parameters

image

A CanvasImageSource to be used as the image to repeat. It can be an:

• HTMLImageElement (<img>)
• HTMLVideoElement (<video>, by using the capture of the video)
• HTMLCanvasElement (<canvas>)
• CanvasRenderingContext2D
• ImageBitmap
• ImageData
• Blob

repetition

A DOMString indicating how to repeat the image. Possible values are:

• "repeat" (both directions)
• "repeat-x" (horizontal only)
• "repeat-y" (vertical only)
• "no-repeat" (neither)

If repetition is an empty string ('') or null (but not undefined), repetition will be "repeat".

Return value

CanvasPattern

An opaque object describing a pattern.

Examples

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.

HTML

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

JavaScript

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

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};

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

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px">
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};</textarea>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);

Specifications

Browser compatibility

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

• The interface defining it, CanvasRenderingContext2D
• CanvasPattern