CreatePattern () and html5createpattern in HTML5

CreatePattern () and html5createpattern in HTML5
Definition and usage

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

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

Repeated elements can be used to draw/fill a rectangle, circle, or line.

JavaScript Syntax:

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

Parameter Value

Parameters	Description
Image	Specifies the image, canvas, or video element to be used.
Repeat	Default value. This mode is repeated in the horizontal and vertical directions.
Repeat-x	This mode is repeated only in the horizontal direction.
Repeat-y	This mode is repeated only in the vertical direction.
No-repeat	This mode is only displayed once (not repeated ).

 

Var c = document. getElementById ('mycanvas '); var ctx = c. getContext ("2d"); // obtain the context 2d environment var img = new Image (); img. src = "lamp.gif"; img. onload = function () {// var pat = ctx after the image is loaded. createPattern (img, "repeat"); ctx. fillStyle = pat; ctx. fillRect (200,200 );}

 

Element