HTML कैनवास की शैडोऑफसेटवाई संपत्ति का उपयोग आकृति से छाया की ऊर्ध्वाधर दूरी निर्धारित करने के लिए किया जाता है। <कैनवास> तत्व आपको जावास्क्रिप्ट का उपयोग करके वेब पेज पर ग्राफिक्स बनाने की अनुमति देता है। प्रत्येक कैनवास में दो तत्व होते हैं जो कैनवास की ऊंचाई और चौड़ाई का वर्णन करते हैं अर्थात क्रमशः ऊंचाई और चौड़ाई।
निम्नलिखित वाक्य रचना है -
context.shadowOffsetY=num;
यहां, अंक पिक्सल में लंबवत दूरी का प्रतिनिधित्व करता है।
आइए अब कैनवास के शैडोऑफसेटवाई गुण को लागू करने के लिए एक उदाहरण देखें -
उदाहरण
<!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 = 30;
ctx.shadowOffsetX = 35;
ctx.shadowOffsetY = 35;
ctx.shadowColor = "orange";
ctx.fillStyle = "red";
ctx.fillRect(150, 60, 280, 250);
</script>
</body>
</html> आउटपुट
