THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas createPattern() Method

❮ HTML Canvas Reference

Image to use:

Lamp

Example

Repeat an image both horizontally and vertically:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
createPattern() Yes 9.0 Yes Yes Yes

Definition and Usage

The createPattern() method repeats the specified element in the specified direction.

The element can be an image, video, or another <canvas> element.

The repeated element can be used to draw/fill rectangles, circles, lines etc.

JavaScript syntax: context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Parameter Values

Parameter Description Play it
image Specifies the image, canvas, or video element of the pattern to use  
repeat Default. The pattern repeats both horizontally and vertically Play it »
repeat-x The pattern repeats only horizontally Play it »
repeat-y The pattern repeats only vertically Play it »
no-repeat The pattern will be displayed only once (no repeat) Play it »

❮ HTML Canvas Reference