Canvas fillRect() मेथड
fillRect() मेथड HTML Canvas पर एक भरा हुआ आयत (filled rectangle) बनाता है। यह rect() + fill() का संक्षिप्त रूप है। डिफ़ॉल्ट रंग काला है।
सिंटैक्स
ctx.fillRect(x, y, width, height);
पैरामीटर्स
- x: ऊपरी-बाएँ कोने का x-निर्देशांक
- y: ऊपरी-बाएँ कोने का y-निर्देशांक
- width: आयत की चौड़ाई
- height: आयत की ऊँचाई
उदाहरण: नीला कैनवास में साफ़ क्षेत्र
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="500" height="350" style="border:2px solid orange;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 500, 350); // पूरा कैनवास नीला भरें
ctx.clearRect(250, 100, 50, 100); // केंद्र में क्षेत्र साफ़ करें
</script>
</body>
</html>
आउटपुट
नीला भरा कैनवास जिसके केंद्र में एक पारदर्शी आयताकार "छेद" है।
fillRect() vs rect()+fill()
// fillRect - सरल, एक कॉल ctx.fillStyle = "red"; ctx.fillRect(10, 10, 100, 50); // rect + fill - लचीला, पथ संचालन के लिए ctx.beginPath(); ctx.rect(10, 10, 100, 50); ctx.rect(120, 10, 100, 50); // दूसरा आयत उसी पथ में ctx.fillStyle = "red"; ctx.fill(); // दोनों भरें
उपयोग के मामले
- बैकग्राउंड लेयर बनाना
- बार चार्ट्स में बार्स बनाना
- पिक्सेल आर्ट, ग्रिड्स
- क्लिपिंग क्षेत्र सेट करने से पहले भरना
