html5-canvas Path (Syntax only) shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (path styling attributes)
Example
shadowColor = color // CSS color
shadowBlur = width // integer blur width
shadowOffsetX = distance // shadow is moved horizontally by this offset
shadowOffsetY = distance // shadow is moved vertically by this offset
This set of attributes will add a shadow around a path.
Both filled paths and stroked paths may have a shadow.
The shadow is darkest (opaque) at the path perimeter and becomes gradiently lighter as it extends away from the path perimeter.
- shadowColor indicates which CSS color will be used to create the shadow.
- shadowBlur is the distance over which the shadow extends outward from the path.
- shadowOffsetX is a distance by which the shadow is shifted horizontally away from the path. A positive distance moves the shadow rightward, a negative distance moves the shadow leftward.
- shadowOffsetY is a distance by which the shadow is shifted vertically away from the path. A positive distance moves the shadow downward, a negative distance moves the shadow upward.
About shadowOffsetX & shadowOffsetY
It's important to note that the whole shadow is shifted in its entirety. This will cause part of the shadow to shift underneath filled paths and therefore part of the shadow will not be visible.
About shadowed strokes
When shadowing a stroke, both the inside and the outside of the stroke are shadowed. The shadow is darkest at the stroke and lightens as the shadow extends outward in both directions from the stroke.
Turning off shadowing when done
After you have drawn your shadows, you might want to turn shadowing off to draw more paths. To turn shadowing off you set the shadowColor to transparent.
context.shadowColor = 'rgba(0,0,0,0)';
Performance considerations
Shadows (like gradients) requires extensive computations and therefore you should use shadows sparingly.
Be especially cautious when animating because drawing shadows many times per second will greatly impact performance. A workaround if you need to animate shadowed paths is to pre-create the shadowed path on a second "shadow-canvas". The shadow-canvas is a normal canvas that is created in memory with document.createElement -- it is not added to the DOM (it's just a staging canvas). Then draw the shadow-canvas onto the main canvas. This is much faster because the shadow computations needn't be made many times per second. All you're doing is copying one prebuilt canvas onto your visible canvas.
<!doctype html>
<html>
<head>
<style>
body{ background-color:white; }
#canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// shadowed stroke
ctx.shadowColor='black';
ctx.shadowBlur=6;
ctx.strokeStyle='red';
ctx.strokeRect(50,50,100,50);
// darken the shadow by stroking a second time
ctx.strokeRect(50,50,100,50);
// shadowed fill
ctx.shadowColor='black';
ctx.shadowBlur=10;
ctx.fillStyle='red';
ctx.fillRect(225,50,100,50);
// darken the shadow by stroking a second time
ctx.fillRect(225,50,100,50);
// the shadow offset rightward and downward
ctx.shadowColor='black';
ctx.shadowBlur=10;
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.fillStyle='red';
ctx.fillRect(50,175,100,50);
// a wider blur (==extends further from the path)
ctx.shadowColor='black';
ctx.shadowBlur=35;
ctx.fillStyle='red';
ctx.fillRect(225,175,100,50);
// always clean up! Turn off shadowing
ctx.shadowColor='rgba(0,0,0,0)';
}); // end window.onload
</script>
</head>
<body>
<canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
