4.4. Shadows

Everybody loves a good shadow; they're probably the most over-used effect in Adobe Photoshop and can be seen all over the Web and in graphic design. This is for good reason though — if done well, they can really add a sense of realism to an image. Done wrong, however, they can completely ruin an image. However, I';m not here to dictate my opinion on graphic design; I';m here to teach you how to become a master at canvas.

Creating a shadow in canvas is relatively straightforward and can be manipulated using four possible global properties. These properties are shadowBlur, shadowOffsetX, shadowOffsetY, and shadowColor. We'll go over each shortly. By default, the 2d rendering context does not draw shadows because shadowBlur, shadowOffsetX, and shadowOffsetY are set to 0, and shadowColor is set to transparent black. The only way you can make a shadow appear is by changing the opacity of the shadowColor to something non-transparent, while also setting either shadowBlur, shadowOffsetX, or shadowOffsetY to a value that isn't 0: