Returns a CanvasPattern object that repeats the specified element in the specified direction.
.png){kind=icon}
.png){kind=icon} |
Syntax
var retval = CanvasRenderingContext2D.createPattern(image, repetition);Parameters
- image [in]
-
Type: Object
An image, canvas, or video element of the pattern to use.
- repetition [in]
-
Type: Variant
The direction of repetition. This parameter specifies one of the following values:
Return value
Type: CanvasPattern
The pattern object to use as a fill style together with a CanvasRenderingContext2D object.
Standards information
- HTML Canvas 2D Context, Section 5
Remarks
If the repetition parameter equals null or an empty string, the createPattern method assumes that the repetition parameter is repeat.
Examples
The following code example demonstrates each type of direction that you can repeat an image in a canvas.
<head>
<title>Canvas pattern example</title>
<script type="text/javascript">
function draw(direction) {
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d"); // Get the context.
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the last image if it exists.
var image = document.getElementById("pix"); // Get the address of the picture.
var pattern = ctx.createPattern(image, direction);// Get the direction from the button.
ctx.fillStyle = pattern; // Assign pattern as a fill style.
ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the canvas.
}
}
</script>
</head>
<body>
<p>This picture will appear below.</p>
<div>
<img id="pix" src="http://go.microsoft.com/fwlink/p/?linkid=199028" />
</div>
<button onclick="draw('repeat')">Repeat all</button>
<button onclick="draw('repeat-x')">Repeat across</button>
<button onclick="draw('repeat-y')">Repeat down</button>
<button onclick="draw('no-repeat')">No Repeat</button>
<canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>
See also
Send comments about this topic to Microsoft
Build date: 11/28/2012
