HTML5 <कैनवास> टैग का उपयोग स्क्रिप्टिंग का उपयोग करके ग्राफिक्स, एनिमेशन आदि को आकर्षित करने के लिए किया जाता है। यह HTML5 में पेश किया गया एक नया टैग है। कैनवास तत्व में एक DOM विधि है जिसे getContext कहा जाता है, जो रेंडरिंग संदर्भ और इसके ड्राइंग फ़ंक्शन प्राप्त करता है। यह फ़ंक्शन एक पैरामीटर लेता है, संदर्भ 2d का प्रकार।
HTML5 कैनवास के साथ एक आयत बनाने के लिए, fillRect(x, y, width, height) विधि का उपयोग करें:
HTML5 कैनवास के साथ एक आयत बनाने का तरीका जानने के लिए आप निम्न कोड को चलाने का प्रयास कर सकते हैं
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</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> आउटपुट
