Canvas createPattern() Method

Image to use:

Lamp

Example

Repeat an image both horizontally and vertically:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();

Try it Yourself »

Description

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

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

Browser Support

The <canvas> element is an HTML5 standard (2014).

createPattern() is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference