JavaScript का उपयोग करके कैनवास पर ड्रॉ कैसे करें?

HTML कैनवास पर ड्रॉइंग JavaScript के साथ की जानी है। कैनवास पर ड्रॉ करने से पहले HTML DOM मेथड getElementById() और getContext() का उपयोग करें।

उसके लिए, कुछ चरणों का पालन करें:

• कैनवास एलिमेंट खोजने के लिए getElementById() मेथड का उपयोग करें।
• getContext() का उपयोग करें, जो कैनवास के लिए ड्रॉइंग ऑब्जेक्ट है। यह ड्रॉइंग के लिए मेथड्स और प्रॉपर्टीज प्रदान करता है।
• उसके बाद कैनवास पर ड्रॉ करें।

उदाहरण

JavaScript पर कैनवास ड्रॉ करने के लिए निम्न कोड चलाएं:

<!DOCTYPE html> <html>
  <head>
    <title>HTML Canvas</title>
  </head>
  <body>
    <canvas id="newCanvas" width="400" height="250" style="border:2px solid #000000;"></canvas>
    <script>
      var canvas = document.getElementById("newCanvas");
      var ctxt = canvas.getContext("2d");
      ctxt.fillStyle = "#56A7E2";
      ctxt.fillRect(0,0,250,120);
    </script>
  </body>
</html>