Set canvas shadow blur

Description

shadowBlur sets the degree of blur in the shadow by a number

Example


<html>
    <head>
        <script>
            window.onload = function(){<!--from   ww  w .  j  ava2s . c om-->
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

               var width  = 60;
               var height = 75;
               var gap    = 50;
            
               context.strokeStyle   = "red";
               context.lineWidth     = 20;
               context.shadowOffsetX = 4;  
               context.shadowOffsetY = 4;
               context.shadowBlur    = 7;
               context.shadowColor   = "gray";
            
               //       xStart yStart cap
               drawLine(25,    25,    "butt"  );
               drawLine(25,    75,    "square");
               drawLine(25,    125,   "round" );
            
               //       xStart       yStart join
               drawJoin(175,         120,   "miter");
               drawJoin(175+50+60,   120,   "bevel");
               drawJoin(175+100+120, 120,   "round");
            
               function drawLine(xStart, yStart, cap)
               {
                  context.lineCap = cap;
            
                  context.beginPath();
                  context.moveTo(xStart,           yStart);
                  context.lineTo(xStart+1.5*width, yStart);
                  context.stroke();
               }
               function drawJoin(xStart, yStart, join)
               {
                  context.lineCap  = "round";
            
                  context.beginPath();
                  context.moveTo(xStart,           yStart);
                  context.lineTo(xStart+(width/2), yStart-height);
                  context.lineTo(xStart+width,     yStart);
                  context.lineJoin = join;
                  context.stroke();
               }
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Click to view the demo





















Home »
  Javascript »
    Javascript Reference »




Array
Canvas Context
CSSStyleDeclaration
CSSStyleSheet
Date
Document
Event
Global
History
HTMLElement
Input Element
Location
Math
Number
String
Window