Teach with us

Drop Shadow with HTML5 Canvas

HTML5 canvas provides capabilities to create nice shadows around the drawings. All drawing operations are affected by the four global shadow attributes.

Sr.No.
Property and Description
1
shadowColor [ = value ]

This property returns the current shadow color and can be set, to change the shadow color.
2
shadowOffsetX [ = value ]

This property returns the current shadow offset X and can be set, to change the shadow offset X.
3
shadowOffsetY [ = value ]

This property returns the current shadow offset Y and can be set, change the shadow offset Y.
4
shadowBlur [ = value ]

This property returns the current level of blur applied to shadows and can be set, to change the blur level.

Example

You can try to run the following code to create shadows:

<!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>
Updated on 28-Jan-2020 08:32:53

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements