HTML and CSS Reference
In-Depth Information
To create a shadowEffect , there are four properties of the Canvas context that need to
be manipulated:
context.shadowColor
The color of the shadow. This uses the same “#RRGGBB” format of the fill
Style and strokeStyle properties.
context.shadowOffsetX
The x offset of shadow. This can be a positive or negative number.
context.shadowOffsetY
The y offset of shadow. This can be a positive or negative number.
context.shadowBlur
The blur filter diffusion of the shadow. The higher the number, the more diffusion.
For example, if you want to create a red shadow that is 5 pixels to the right and 5 pixels
down from your text, with a blur of 2 pixels, you would set the properties like this:
context.shadowColor = "#FF0000";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 2;
Handling global shadows
Just like we saw with globalAlpha , we must reset the shadow properties before we draw
the background for textArranger ; otherwise, the shadow will apply to the entire image.
First, in the canvasApp() function, we create a set of variables to hold the shadow values:
var textAlpha = 1;
var shadowX = 1;
var shadowY = 1;
var shadowBlur = 1;
var shadowColor = "#707070";
We then make sure to turn off the shadow before we render the background for
textArranger in the drawScreen() . We don't have to reset the shadowColor , but we think
it is good practice to update all the relative properties relating to any global change to
the Canvas context:
context.shadowColor = "#707070";
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
Later in drawScreen() , we render the shadow based on the settings in the four variables
we created:
context.shadowColor = shadowColor;
context.shadowOffsetX = shadowX;
context.shadowOffsetY = shadowY;
context.shadowBlur = shadowBlur;
Search WWH ::




Custom Search