THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML canvas createPattern() Method

HTML canvas Reference 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

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the createPattern() method.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.


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 HTML Canvas Reference