Applying a Drop Shadow
Applying a drop shadow to an image, rectangle, text or any other element in an HTML5 Canvas is achieved using a few lines of javascript:
<body onload="drawCanvas();">
<div>
<canvas id="myCanvas" width="150" height="150">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
function drawCanvas() {
// Get our Canvas element
var surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported
var context = surface.getContext('2d');
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 5;
context.shadowColor = "black";
// Set the fill style to Red
context.fillStyle = "rgb(255,0,0)";
// Draw the rectangle 50x50 pixels in dimension at x/y 10,10
context.fillRect(10, 10, 100, 100);
}
}
Here we draw a solid Red rectangle using the fillRect() method that we've already covered in the Shapes and Fill Styles section. The Drop Shadow is achieved by specifying the following properies:
context.shadowOffsetX = 4;
context.shadowOffsetY = 4;
context.shadowBlur = 5;
context.shadowColor = "black";
The shadowOffsetX and shadowOffsetY properties control the offset of the shadow from the rectangle whilst the shadowBlur property controls how sharp the shadow is.
