Drop Shadow with HTML5 Canvas

HTML5 Web Development Front End Technology

In HTML5 canvas, you can add shadows to shapes, lines, texts, and images to give them the appearance of depth. You can use the following canvas context attributes to add shadows when using the HTML5 canvas.

shadowOffsetX()
shadowOffsetY()
shadowColor()
shadowBlur()

shadowOffsetX()

The property can be used to get or set a shadow's horizontal distance of a shadow from a page. To change the location of a shadow, you can use positive or negative numbers. Zero is the default value.

Syntax

Following is the syntax for shadowOffsetX()

ctx.shadowOffsetX = h_distance;

where h_distance belongs to the horizontal distance of a shadow from page.

shadowOffsetY()

The property can be used to get or set a shadow's vertical distance of a shadow from a page. To change the location of a shadow, you can use positive or negative numbers. Zero is the default value.

Syntax

Following is the syntax for shadowOffsetY()

ctx.shadowOffsetX = v_distance;

where v_distance belongs to the vertical distance of a shadow from page.

shadowColor()

The shadowColor() property is used to get or set the color to use for shadows.

Syntax

Following is the syntax for shadowColor()

ctx.shadowColor

Where shadowColor is the CSS color.

shadowBlur()

The shadowBlur() property is used to get or set the current blur value that is applied to shadows.

Syntax

Following is the syntax for shadowBlur()

ctx.shadowBlur = blur_value

Where blur_value is the amount of blur that is applied to shadows.

Let’s look into the following examples to get a clear idea on drop shadows with HTML5 canvas

Example

In the following example we are creating a series of squares with different blur degrees.

<!DOCTYPE html>
<html>
   <body>
      <canvas id="mytutorial" width="500" height="600"></canvas> 
      <script>
      var canvas = document.getElementById("mytutorial");
      if (canvas.getContext) 
      {
         var ctx = canvas.getContext('2d');
         ctx.shadowColor = "black";
         ctx.shadowBlur = 5;
         ctx.shadowOffsetX = 5;
         ctx.shadowOffsetY = 5;
         ctx.shadowColor = "green";
         ctx.strokeRect(60, 60, 210, 210);
         ctx.shadowColor = "blue";
         ctx.strokeRect(85, 85, 210, 210);
      }
      </script>
   </body> 
</html>

Output

When the script gets executed, it will generate an output displaying the series of squares with varying degrees of shadow blur on the webpage.

Example

Considering the following example, we are creating a shadow blur to the canvas.

<!DOCTYPE html>
<html>
   <body>
      <canvas id="mytutorial" width="300" height="150"></canvas>
      <script>
      var c = document.getElementById("mytutorial");
      var ctx = c.getContext("2d");
      ctx.shadowBlur = 20;
      ctx.shadowColor = "blue";
      ctx.fillStyle = "green";
      ctx.fillRect(20, 20, 100, 80);
      </script>
   </body>
</html>

Output

On running the above script, it will generate an output consisting of a canvas drawn on the webpage filled with green colour with a shadow blur of blue color.

Example

Looking the following example, we are creating a shadow for text.

<!DOCTYPE html>
<html>
   <body>
      <canvas id="mytutorial" width="500" height="200"></canvas>
      <script>
      var canvas = document.getElementById("mytutorial");
      if (canvas.getContext)
      {
         var ctx = canvas.getContext('2d');
         ctx.fillStyle = 'green';
         ctx.shadowColor = 'grey';
         ctx.shadowBlur = 2;
         ctx.shadowOffsetX = 8;
         ctx.shadowOffsetY = 9;
         ctx.font = 'italic 32px sans-serif ';
         ctx.fillText('TUTORIALSPOINT', 10, 150);
      }
      </script>
   </body> 
</html>

Output

When the user tries to execute the script, the output window pops up, displaying the text used in the script along with a shadow added to the text on the webpage.

Example

Let’s look into the following example, we are creating a blur for the text.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>

      <script type>
         function drawShape(){
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
            // Make sure we don't execute when canvas isn't supported
                 
            if (canvas.getContext){
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               ctx.shadowOffsetX = 2;
               ctx.shadowOffsetY = 2;
               ctx.shadowBlur = 2;
               ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
               ctx.font = "20px Times New Roman";
               ctx.fillStyle = "Black";
               ctx.fillText("This is shadow test", 5, 30);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>

   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

Output

When the script gets executed, it will generate an output consisting of text with a shadow blur added to it on the webpage.

Yaswanth Varma

Updated on: 11-Oct-2023

799 Views

Kickstart Your Career

Get certified by completing the course

Get Started