How to use HTML5 Canvas shadow

This article describe about HTML5 Canvas shadow.
  • 2431

HTML5 Canvas Shadow

Like a real object shadow in HTML5 we can also create shadow of object by using the HTML5 property, ShadowColor and ShadowBlur where ShadowColor property define the color of shadow. And ShadowBlur property define the size of shadow.

Syntax

<script>

     context.shadowColor = "gray";

    context.shadowBlur = 25;

    context.shadowOffsetX = 20;

    context.shadowOffsetY = 20;

</script>

 

EXample:

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

      #myownCanvas {

        border: 2px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function () {

            var canvas = document.getElementById("myownCanvas");

            var context = canvas.getContext("2d"); 

            context.rect(188, 40, 200, 100);

            context.fillStyle = "blue";

            context.shadowColor = "gray";

            context.shadowBlur = 25;

            context.shadowOffsetX = 20;

            context.shadowOffsetY = 20;

            context.fill();

        };

    </script>

  </head>

  <body>

    <canvas id="myownCanvas" width="600" height="220"></canvas>

  </body>

</html>

 

Output 

shadow pic1.jpg

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.