HTML Canvas shadowColor प्रॉपर्टी: छाया रंग सेट करना

Canvas shadowColor प्रॉपर्टी

shadowColor प्रॉपर्टी HTML Canvas पर ड्रॉ की जाने वाली आकृतियों की छाया का रंग सेट करती है। डिफ़ॉल्ट #000000 (काला) है। छाया देखने के लिए shadowBlur या shadowOffsetX/Y भी सेट करना आवश्यक है।

सिंटैक्स

ctx.shadowColor = "color";

उदाहरण: ग्रे छाया के साथ नीला आयत

<!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");
    ctx.shadowBlur = 20;
    ctx.shadowColor = "gray";
    ctx.fillStyle = "blue";
    ctx.fillRect(40, 40, 200, 250);
  </script>
</body>
</html>

आउटपुट

नीला आयत जिसके चारों ओर 20px ब्लर की ग्रे छाया है।

छाया प्रॉपर्टीज (सभी चार आवश्यक)

रंग प्रारूप

ctx.shadowColor = "red";              // नाम
ctx.shadowColor = "#ff0000";          // हेक्स
ctx.shadowColor = "rgb(255,0,0)";     // RGB
ctx.shadowColor = "rgba(255,0,0,0.5)"; // RGBA (पारदर्शिता के साथ)
ctx.shadowColor = "hsl(0,100%,50%)";  // HSL

नोट

छाया सभी बाद के ड्रॉइंग ऑपरेशन्स पर लागू होती है। छाया रीसेट करने के लिए:

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