CODEWITHSUNDEEP
javascriptcanvas
Steve
Steve

Reputation: 655

how can i create a shadow effect running fully along all sides but the top in canvas?

Is there a way to have a blur effect on the left, right and bottom but not the top for the orange shape in the supplied code? I tried using shadowOffsetY but this moves the left and right side shadow down as well.

I need the shadow to run the full length of all sides but the top.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
  </canvas>
  </body>
<script>
  var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "orange";
ctx.shadowBlur = 10;
ctx.shadowColor = "black";
ctx.fillRect(20,20,75,75);
  </script>
</html>

Upvotes: 0

Views: 49

Answers (1)

Paul
Paul

Reputation: 1061

Not very clever but :

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">
        </canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "orange";
            ctx.shadowBlur = '10';
            ctx.shadowColor = "black";
            ctx.fillRect(20,20,75,75);
            ctx.fillStyle = "white";
            ctx.shadowBlur = '0';
            ctx.shadowColor = "none";
            ctx.fillRect(10, 5, 95, 15);
         </script>
    </body>
 </html>

Upvotes: 1

Related Questions