HTML5 Canvas Shadows

HTML5 Canvas shadows can be added to an HTML5shapes drawn on the canvas automatically add shadows, shadowOffsetX and shadowOffsetY set the distance to draw the shadow from the shape.

Online example

Can be added to an HTML5shapes drawn on the canvas automatically add shadows. Here are some examples:

Shadows are created by the following four2D Context attribute controls:

1. shadowOffsetX

2. shadowOffsetY

3. shadowBlur

4. shadowColor

shadowOffsetX and shadowOffsetY set the distance to draw the shadow from the shape. A positive value means the shadow is drawn to the right of the shape on the (x) axis and below it on the (y) axis. A negative value means the shadow is drawn to the left of the shape on the (x) axis and above it on the (y) axis.
shadowBlur sets the degree of blurring for the shadow. The higher the number, the more blurred the shape. The lower the number, the sharper the shadow becomes. A value of 0 means the shadow is not blurred at all.
shadowColor only sets the color of the shadow.
This is the code for the example above:

<canvas id="ex1" width="500" height="200" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.shadowOffsetX =　10;
context.shadowOffsetY =　10;
context.shadowBlur =　4;
context.shadowColor = "#666666";//or use rgb(red, green, blue)
context.fillStyle = "#000000";
context.fillRect(10,10,　50,　50);
context.fillStyle = "#000066";
context.font = "30px Arial";
context.fillText("HTML5　Canvas Shadow",　10,120);
</script>