HTML5 - Mastering the Canvas Element (VI) - Shadows

In this tutorial, we'll start talking about shadows and how to implement them for any shape. It's easy and difficult depending upon how you view it.

Now before you start, what if I told you? All shapes do have shadows by-default.

Yup that's right! All shapes do have shadows by default. The thing is, that how shadows appear on the shapes is decided by a few properties. And the default values of the properties are such that the shadow doesn't appear.

These are the properties of the context object.

Here are the properties and their default values:

• shadowOffsetX: This property decides how much to the right of the shape should the shadow start.
• Type: Integer.
• Default value: 0. Which means that the shadow starts where the shape starts.
• shadowOffsetY: This property decides how much to the bottom of the shape should the shadow start.
• Type: Integer.
• Default value: 0. Which means that the shadow starts where the shape starts.
• shadowBlur: This property decides how blur the shadow will look.
• Type: Integer.
• Default value: 0. Which means that the shadow isn't blur.
• shadowColor: This is a property that decides the colour of the shadow.
• Type: String
• Default value: "#000000". Which means the shadow will be black.

The reason you don't see a shadow is that since the shadow offset is 0. The shadow is exactly behind the shape. In fact, if you change the blur value to some non-zero value, without touching any other property, you'll see a shadow.

Manipulating the properties accordingly should give a beautiful shadow to all shapes that you draw after changing the properties.

If you don't want the shadow, simply reset the properties to their default values.

Its that simple.