HTML कैनवास पर ड्राइंग जावास्क्रिप्ट के साथ की जानी है। कैनवास पर चित्र बनाने से पहले HTML DOM विधि getElementById() और getContext() का उपयोग करें।
उसके लिए, कुछ चरणों का पालन करें -
- कैनवास तत्व को खोजने के लिए आपको getElementById() विधि का उपयोग करने की आवश्यकता है।
- getContext() का उपयोग करें, जो कैनवास के लिए ऑब्जेक्ट बना रहा है। यह ड्राइंग के तरीके और गुण प्रदान करता है।
- उसके बाद कैनवास पर ड्रा करें।
उदाहरण
आप जावास्क्रिप्ट पर कैनवास बनाने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं -
<!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>