Tutorials References Exercises Bootcamps Videos Menu
Sign Up Create Website Get Certified Upgrade

HTML canvas createPattern() Method

❮ HTML Canvas Reference

Image to use:



Repeat an image both horizontally and vertically:



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

Browser Support

The numbers in the table specify the first browser version that fully supports the 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
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)

❮ HTML Canvas Reference