Canvas fill() मेथड
fill() मेथड HTML Canvas में वर्तमान ड्राइंग पथ (path) को भरता है। डिफ़ॉल्ट भराव रंग काला (#000000) है। पथ beginPath(), rect(), arc(), lineTo() आदि से बनाया जाता है।
सिंटैक्स
ctx.fill();
उदाहरण: हरा आयत भरना
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="250" style="border:2px solid blue;">
आपका ब्राउज़र HTML5 canvas टैग सपोर्ट नहीं करता।
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(50, 60, 300, 200); // आयत पथ बनाएं
ctx.fillStyle = "green"; // भराव रंग सेट करें
ctx.fill(); // पथ भरें
</script>
</body>
</html>
आउटपुट
नीले बॉर्डर वाले कैनवास पर (50,60) स्थिति पर 300x200 का हरा भरा आयत।
मुख्य बिंदु
fillStyleप्रॉपर्टी से रंग, ग्रेडिएंट, या पैटर्न सेट करेंfill()वर्तमान पथ को भरता है और पथ को रीसेट नहीं करता- बाद में
stroke() कॉल करके आउटलाइन भी बना सकते हैं - पथ बंद होना चाहिए (closePath() स्वतः कॉल होता है)
fillStyle विकल्प
ctx.fillStyle = "red"; // CSS रंग नाम ctx.fillStyle = "#ff0000"; // हेक्स रंग ctx.fillStyle = "rgb(255,0,0)"; // RGB ctx.fillStyle = gradient; // ग्रेडिएंट ऑब्जेक्ट ctx.fillStyle = pattern; // पैटर्न ऑब्जेक्ट