HTML5 shadows are controlled by several operations available in HTML5 arsenal of operations. The shadow effect can be applied on any image, path, text or other HTML5 canvas elements. The way you want to trigger shadow effect is by setting shadowColor to some valid value.

Let’s look at some of the Shadow operation properties available in HTML5:

• shadowColor – any CSS compliant color will work for this shadow operation property
• shadowOffsetX – count set in pixels. Shadow effect applied to the right or if negative value, than to the left
• shadowOffsetY – count set in pixel. Shadow effect applied to the left or if negative value, than to the right
• shadowBlur – Gaussian blur effect. The higher the value you set for shadowBlur the blurrier shadow edges will become.

Here is sample code in HTML5 that adds shadow to a text. In this example we’ll apply shadow color and move shadow to the right by 5 pixels and up by 5 and then blur this shadow with Guassian effect set to 5. 

    <script>

                function shadowExample(context) {

                    context.shadowColor = 'rgba(100, 100, 100, 100, 0.5)';

                    context.shadowOffsetX = 5;

                    context.shadowOffsetY = -5;

                    context.shadowBlur = 5;

            }

</script> It is our recommendation that you use one approach while applying shadows to your images, text or other HTML5 canvas objects.