HTML Canvas shadowBlur प्रॉपर्टी: छाया ब्लर स्तर

Canvas shadowBlur प्रॉपर्टी

shadowBlur प्रॉपर्टी HTML Canvas पर ड्रॉ की जाने वाली आकृतियों की छाया का ब्लर स्तर (blur level) सेट करती है। डिफ़ॉल्ट 0 (कोई ब्लर नहीं, तेज किनारे)। उच्च मान = अधिक धुंधली/फैली छाया।

सिंटैक्स

ctx.shadowBlur = number;

उदाहरण: विभिन्न ब्लर स्तरों के साथ आयत्स

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="600" height="350" style="border:2px solid orange;"></canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var ctx = c.getContext("2d");
    
    // पहला आयत: ब्लर 20, काली छाया, हरा भराव
    ctx.shadowBlur = 20;
    ctx.shadowColor = "black";
    ctx.fillStyle = "green";
    ctx.fillRect(40, 40, 100, 250);
    
    // दूसरा आयत: ब्लर 30, नीली छाया, नारंगी भराव
    ctx.shadowBlur = 30;
    ctx.shadowColor = "blue";
    ctx.fillStyle = "orange";
    ctx.fillRect(200, 40, 200, 150);
  </script>
</body>
</html>

आउटपुट

दो आयत्स: बाएं - हरा, 20px ब्लर काली छाया के साथ; दाएं - नारंगी, 30px ब्लर नीली छाया के साथ।

छाया प्रॉपर्टीज समूह

ब्लर स्तर प्रभाव

• 0 - तेज छाया (offset पर निर्भर)
• 5-10 - हल्की नरम छाया
• 15-25 - मध्यम नरम छाया (सामान्य UI)
• 30-50 - भारी चमक/प्रभामंडल प्रभाव
• >50 - बहुत फैली छाया, प्रदर्शन प्रभाव

ctx.shadowBlur = 0;
ctx.shadowColor = "transparent";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;