HTML5 Canvas - Pattern and Shadow
Advertisements
Create Pattern
There is following method required to create a pattern on the canvas −
Sr.No.
Method and Description
1
createPattern(image, repetition)
This method will use image to create the pattern. The second argument could be a string with one of the following values: repeat, repeat-x, repeaty, andno-repeat. If the empty string or null is specified, repeat will. be assumed
Example
Following is a simple example which makes use of above mentioned method to create a nice pattern.
#test {
width:100px;
height:100px;
margin: 0px auto;
}
function drawShape() {
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// create new image object to use as pattern
var img = new Image();
img.src = 'images/pattern.jpg';
img.onload = function() {
// create pattern
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
Assuming we have following pattern images/pattern.jpg.
The above example would draw following result −
Create Shadows
HTML5 canvas provides capabilities to create nice shadows around the drawings. All drawing operations are affected by the four global shadow attributes.
Sr.No.
Property and Description
1
shadowColor [ = value ]
This property returns the current shadow color and can be set, to change the shadow color.
2
shadowOffsetX [ = value ]
This property returns the current shadow offset X and can be set, to change the shadow offset X.
3
shadowOffsetY [ = value ]
This property returns the current shadow offset Y and can be set, change the shadow offset Y.
4
shadowBlur [ = value ]
This property returns the current level of blur applied to shadows and can be set, to change the blur level.
Example
Following is a simple example which makes use of above mentioned attributes to draw a shadow.
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
function drawShape() {
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("This is shadow test", 5, 30);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
The above example would produce following result −
html5_canvas.htm
Advertisements