Text and Image Drop Shadows

Ongoing HTML5 Canvas Tutorial: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

 

You can add shadows to the items that you place on a HTML5 canvas. This not only includes text but images, shapes and lines, as well. We'll take a look at four shadow properties:

shadowColor
shadowOffsetX
shadowOffsetY
shadowBlur

The first one is shadowColor. This is obviously the colour you want for your shadow. The colour should be a named colour (like red, black, etc), a hexadecimal colour, or a RGB/RGBA one. Let's look at some code:

canvas_context.fillStyle = "red";
canvas_context.font = "bold 34pt Arial";

canvas_context.shadowColor = "black";
canvas_context.shadowOffsetX = 4;
canvas_context.shadowOffsetY = 4;
canvas_context.fillText("Home and Learn", 20, 50);

The first two lines set a fill style to red, and the font to 34 point bold Arial. Next comes the shadow color:

canvas_context.shadowColor = "black";

You type the colour you want after an equal sign. The next two lines are these:

canvas_context.shadowOffsetX = 4;
canvas_context.shadowOffsetY = 4;

The offset is how far from the text or image you want the shadow to be. There is an offset for the X value and one for the Y value (you don't have to use both). Setting an offset to a value of 0 switches it off.

The above code would get you a shadow like this:

A hard shadow applied to text on a HTML5 canvas

If you don't want the shadow to be so hard then you can use rgba for your colour value, and set an alpha value. For example:

canvas_context.shadowColor = "rgba( 0, 0, 0, 0.2 )";

The first three values between the round brackets of rgba set the colour. The fourth one sets the alpha value (how transparent something is). We're setting it to a value of 0.2. Alpha values go from 0 to 1. To switch off shadows altogether you set the alpha value to 0.

The rgba colour value above would result in this for your text:

Soft shadow with the HTML5 canvas

As you can see, this makes the shadow a lot softer.

If you want blurred text then the property to use is shadowBlur. Like this:

canvas_context.shadowBlur = 7;

Values for shadowBlue can go from 0, which means no blur and is the default, to larger numbers like 30 or more, which spreads the blur out, getting fainter the higher the value.

Here's what a value of 7 looks like, using the same text as above:

Shadow blur with the HTML5 canvas

You can produce quite a lot of sophisticated text effects just using shadow and blur techniques. For a flavour of just what you can do, have a look at Mike Deal's excellent article here (it is a bit advanced, though): http://www.html5rocks.com/en/tutorials/canvas/texteffects/.

Image Shadows

Shadows can be applied to images, as well as text. For this to work, you need to use an image format with a transparent background like GIF and PNG. Here's some code to study:

var brolly = new Image();
brolly.src = "brolly.gif";

canvas_context.shadowColor = "rgba( 0, 0, 0, 0.3 )";
canvas_context.shadowOffsetX = 6;
canvas_context.shadowOffsetY = 6;
canvas_context.shadowBlur = 3;
canvas_context.drawImage( brolly, 25, 250 );

Note that you don't have to do anything special to get an image shadow. The code above just creates an image object which is then loaded with the drawImage method in the usual way. Because we've set shadow and blur options, the image will look like this in a browser:

Image with a shadow applied in HTML5

If you didn't use an image with a transparent background you wouldn't get the shadow around your shape. It would look like this:

Non-transparent image with failed shadow

Because the JPEG image format can't do transparent backgrounds the shadow is created around the image as a whole, rather than the picture in the image.

But play around with shadows and blurs. See what you can come up with.

 

In the next part, we'll take a brief look at Javascript libraries.