HTML5 Create Shadow

Summary -

In this topic, we described about the below sections -

Create Shadow

We can add shadows to the text, an image, a shape or a line that can generate a sense of third dimension in HTML5. We can use the following properties to add shadows with the HTML5 Canvas.

syntax of shadowColor [ = value ] -

ctx.shadowcolor

In the above syntax, h_distance (type: number) is the horizontal distance of a shadow from a shape.

Syntax of shadowOffsetX [ = value ] -

ctx.shadowOffsetX = h_distance;

In the above syntax, v_distance (type: number) is the vertical distance of a shadow from a shape.

syntax of shadowOffsetY [ = value ]:

ctx.shadowOffsetY = v_distance;

In the above syntax, color_value (type: string) is the CSS color.

syntax of shadowBlur [ = value ]:

ctx.shadowBlur = blur_value

In the above syntax, blur_value(type: number) is the amount of blur that is applied to shadows.

Property	Description
shadowColor [ = value ]	This property applies the specified shadow color. This property can be set to adjust the shadow color.
shadowOffsetX [ = value ]	This property applies the specified shadow offset X. This property can be set to shift the shadow offset X.
shadowOffsetY [ = value ]	This property applies the current shadow offset Y. This property can be set to shift the shadow offset Y.
shadowBlur [ = value ]	This property applies the existing level of blur used to shadows. This property can be set to shift the blur level.

Example-

Below example describes the how to draw a shadow using above-mentioned attributes.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
         body { 
           margin: 10px;
           padding: 10px;
          }
    </style>
  </head>
  <body data-rsssl=1>
    <canvas id="myCanvas" width="578" height="200" style="border:2px 
                                                 solid #00d3d3;">
    </canvas> 
    <script>
         var canvas = document.getElementById('myCanvas');
         var context = canvas.getContext('2d');
         context.font = "18pt Helvetica";
         context.shadowOffsetX = 3;
         context.shadowOffsetY = 3;
         context.fillText("No shadow", 90, 80);
         context.shadowColor = "rgba(0,0,0,0.4)";
         context.fillText("Shadow with color", 90, 120);
         context.shadowBlur = 4;
         context.fillText("Shadow Test", 90, 160);
     </script>
  </body>
</html>

Output -

Shadowcolor

HTML supports to apply shadows to the shapes as well.

Example:

Following example describes how draw a rectangle with a blue shadow.

<!DOCTYPE html>
<html>
  <body>
     <canvas id="myCanvas1" width="250" height="120" 
                      style="border:2px solid #00d3d3;">
         Your browser does not support the HTML5 canvas tag.
     </canvas>
     <script>
         var c = document.getElementById("myCanvas1");
         var ctx = c.getContext("2d");
         ctx.shadowBlur = 30;
         ctx.fillStyle = "green";
         ctx.shadowColor = "blue";
         ctx.fillRect(120, 10, 80, 80);
     </script>
  </body> 
</html>

Output -

Shadowoffsetx

HTML supports to set offset for the shadow according to x-axis. shadowOffsetX method used to add offset position to the shadow relating to X-axis.

Example -

Below example describes how to draw a rectangle with a shadow placed 30 pixels to the right.

<!DOCTYPE html>
<html>
  <body>
      <canvas id="myCanvas2" width="250" height="120" 
                          style="border:2px solid #00d3d3;">
                   Your browser does not support the HTML5 canvas tag.
      </canvas>
      <script>
             var c = document.getElementById("myCanvas2");
             var ctx = c.getContext("2d");
             ctx.shadowBlur = 20;
             ctx.shadowOffsetX = 30;
             ctx.shadowColor = "blue";
             ctx.fillStyle= "green";
             ctx.fillRect(30, 30, 100, 80);
     </script>
  </body>
</html>

Output -

ShadowOffsetY

HTML supports to set offset for the shadow according to y-axis.

shadowOffsetY method used to add offset position to the shadow relating to Y-axis.

Example -

Below example describes how to draw a rectangle with a shadow placed 30 pixels below the Rectangle position.

<!DOCTYPE html>
<html>
  <body>
      <canvas id="myCanvas3" width="250" height="180" 
                      style="border:2px solid #00d3d3;">
           Your browser does not support the HTML5 canvas tag.
      </canvas>
      <script>
           var c = document.getElementById("myCanvas3");
           var ctx = c.getContext("2d");
           ctx.shadowBlur = 20;
           ctx.shadowOffsetY = 30;
           ctx.shadowColor = "blue";
           ctx.fillStyle = "yellow";
           ctx.fillRect(30, 30, 100, 80);
      </script>
  </body> 
</html>

Output -

Shaowblur

HTML supports to set the blur level for the shadow.

shadowBlur method used to add blur shadow to the shape.

Example -

Below example describes about how to draw a yellow rectangle with blue shadow, with blur level of 40.

<!DOCTYPE html>
<html>
  <body>
      <canvas id="myCanvas4" width="250" height="120"
                          style="border:2px solid #00d3d3;">
             Your browser does not support the HTML5 canvas tag.
      </canvas>
      <script>
           var c = document.getElementById("myCanvas4");
           var ctx = c.getContext("2d");
           ctx.shadowBlur = 40;
           ctx.shadowColor = "blue";
           ctx.fillStyle = "yellow";
           ctx.fillRect(30, 30, 100, 80);
      </script>
  </body>
</html>

Output -

Browser Support

The following browsers with versions in the table indicates the initial browser version that completely supports all the above methods(shadowcolor, shadowOffsetX. shadowOffsetY,shadowblur.)

Property	Chrome	Edge	Firefox	Safari	Opera
shadow	Yes	9.0 and above	Yes	Yes	Yes