How to use HTML5 Canvas Pattern
This article describes about HTML5 Canvas Pattern.
HTML5 Canvas Pattern
For create pattern in HTML5 use the createPattern() method of the canvas context, then we can set it style using the fillStyle property, and fill it shape using the fill() method. And createPattern() method requires image object and repeat option, these are repeated repeat-x, repeat-y, or no-repeat. The repeat option is defaulted to repeat.
Syntax:
|
<script>
var patt = context.createPattern(imageObj, repeatOption);
context.fillStyle = patt;
context.fill();
</script>
|
Example:
|
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function () {
var patt = context.createPattern(imageObj, "repeat");
context.rect(15, 15, canvas.width - 20, canvas.height - 20);
context.fillStyle = patt;
context.fill();
};
imageObj.src="pattern.jpg";
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
|
output
Further Readings
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here