HTML Canvas rect() मेथड: आयत बनाना

Canvas rect() मेथड

rect() मेथड HTML Canvas पर एक आयताकार पथ (rectangular path) बनाता है। यह केवल पथ को परिभाषित करता है; इसे दृश्यमान बनाने के लिए stroke() (आउटलाइन) या fill() (भराव) कॉल करना आवश्यक है।

सिंटैक्स

ctx.rect(x, y, width, height);

पैरामीटर्स

• x: ऊपरी-बाएँ कोने का x-निर्देशांक
• y: ऊपरी-बाएँ कोने का y-निर्देशांक
• width: आयत की चौड़ाई
• height: आयत की ऊँचाई

उदाहरण: नेस्टेड आयत्स

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="450" height="350" style="border:2px solid blue;">
    आपका ब्राउज़र HTML5 canvas टैग सपोर्ट नहीं करता।
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    // बाहरी आयत
    ctx.beginPath();
    ctx.rect(100, 60, 200, 200);
    ctx.fillStyle = "orange";
    ctx.fill();
    
    // आंतरिक आयत
    ctx.beginPath();
    ctx.rect(110, 90, 180, 120);
    ctx.fillStyle = "yellow";
    ctx.fill();
  </script>
</body>
</html>

आउटपुट

नारंगी बाहरी आयत जिसके अंदर पीला आंतरिक आयत है, एक नेस्टेड प्रभाव बनाता है।

rect() vs fillRect() vs strokeRect()

जटिल आकृतियों के लिए rect() उपयोगी

rect() का उपयोग करें जब:

• एक ही पथ में कई आयत्स जोड़ने हों
• पथ को बाद में fill() और stroke() दोनों करना हो
• क्लिपिंग पथ (clipping path) बनाना हो