HTML5 Canvas से शैडो ड्रा करें

Canvas पर छाया बनाना

HTML5 Canvas पर शैडो ड्रा करने के लिए:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #test {
        width: 100px;
        height: 100px;
        margin: 0px auto;
      }
    </style>
    <script>
      function drawShape() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
          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('इस डेमो के लिए Safari या Firefox 1.5+ चाहिए।');
        }
      }
    </script>
  </head>
  <body id="test" onload="drawShape();">
    <canvas id="mycanvas"></canvas>
  </body>
</html>

शैडो प्रॉपर्टीज

महत्वपूर्ण नोट्स

• सभी ड्राइंग ऑपरेशन्स (पाथ, टेक्स्ट, इमेज) पर शैडो लागू होती है।
• shadowColor को पारदर्शी (rgba) सेट करके छाया छुपाएं।
• बड़े कैनवास पर अधिक ब्लर प्रदर्शन प्रभावित कर सकता है।
• शैडो ट्रांसफॉर्मेशन (rotate, scale) से प्रभावित होती है।