HTML5 <canvas> टैग का उपयोग स्क्रिप्टिंग के माध्यम से ग्राफिक्स, एनिमेशन आदि बनाने के लिए किया जाता है। कैनवास एलिमेंट में getContext नामक एक DOM मेथड होता है, जो रेंडरिंग कॉन्टेक्स्ट और इसके ड्राइंग फंक्शन्स प्राप्त करता है।
HTML5 कैनवास के साथ आयत बनाने के लिए fillRect(x, y, width, height) मेथड का उपयोग करें:
उदाहरण
HTML5 कैनवास के साथ आयत बनाने का तरीका सीखने के लिए निम्न कोड चलाएं:
<!DOCTYPE html> <html> <head> <title>HTML5 कैनवास टैग</title> </head> <body> <canvas id="newCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.fillStyle = '#7cce2b'; ctx.fillRect(0,0,300,100); </script> </body> </html>fillRect() मेथड एक भरा हुआ आयत बनाता है। केवल आउटलाइन बनाने के लिए strokeRect() का उपयोग करें।
