Provides an object that contains a pattern for a canvas fill style by using an image or portion of an image.
.png){kind=icon}
.png){kind=icon} |
Members
The CanvasPattern object does not define any members.
Standards information
- HTML Canvas 2D Context, Section 1
Remarks
To create a pattern from a portion of an existing canvas image, create a temporary clip canvas and use drawImage to extract the piece. Then, pass the temporary canvas to the createPattern method.
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
