HTML and CSS Reference
In-Depth Information
Listing 4-14.
Using Shadow Properties to Configure Shadows
var canvas = $("#MyCanvas").get(0);
var context = canvas.getContext("2d");
context.shadowColor = "#808080";
context.shadowBlur = 5;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.fillRect(20, 20, 150, 80);
context.shadowColor = "red";
context.shadowBlur = 15;
context.shadowOffsetX = -5;
context.shadowOffsetY = 5;
context.fillStyle = "blue";
context.textAlign = "center";
context.font = "bold 30px Arial";
context.illText("Hello Canvas!",100,150);
This code draws a rectangle with a shadow color of #808080 and offsets of 10 pixels. The
blur
value is
5
. The x offset value is
-5
, and
shadowColor
is
red
. Figure 4-16 show how the resulting rectangle and text
look.
Figure 4-16.
Adding shadows to a rectangle and text
The text drawn on the canvas has a negative x shadow offset value, and hence the shadow shifts to the
left side. The y shadow offset is a positive value, and hence the shadow shifts toward the bottom.
