JavaScript Day 23: Shadows

A quick drive-by post today. I’m running out of content. Must… stretch… out… topics.

In Flash, since version 8, we’ve had a few different bitmap effects: shadows, blurs, glows.

Canvas at least has shadows built in. Very simple to use. Shadows are composed of four properties: offset (x and y), color, and blur. The only even slightly tricky one is color. By default, the shadow color is fully transparent black. So you won’t see it. You have to set context.shadowColor to something else in order to have a shadow appear at all.

Then you set shadowOffsetX and shadowOffsetY, and if you want, set shadowBlur.Voila! A shadow. Like transformations, the shadow settings effect everything you draw AFTER you set a particular property. If you draw something without a shadow, there’s no way to add a shadow to it. You have to basically set the shadow and redraw it, or whatever. To stop drawing shadows, set the shadow color to “rgb(0,0,0,0)”.

Here’s a sample:

[php lang=”JavaScript”]context.font = “20pt Arial”;
context.fillText(“No Shadow”, 100, 40);

context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.fillText(“Still no Shadow”, 100, 80);

context.shadowColor = “rgba(0,0,0,0.5)”;
context.fillText(“Crappy Shadow”, 100, 120);

context.shadowBlur = 4;
context.fillText(“Ooh! Nice Shadow!”, 100, 160);[/php]

And here’s what you get:

First, some text without a shadow.

Then we set the offset, but the color is still fully transparent, so we still have nothing.

Next we set a shadow color which gives us a lame Microsoft-Word-Art-1995-looking drop shadow. Yuck.

But a bit of a blur makes it all good.