कैनवास की चौड़ाई को पिक्सेल में सेट करने के लिए <कैनवास> तत्व की चौड़ाई विशेषता का उपयोग किया जाता है। निम्नलिखित वाक्य रचना है -
<canvas width="pixels_val">
ऊपर, pixel_val पिक्सेल में सेट की गई चौड़ाई है। आइए अब <कैनवास> तत्व की चौड़ाई विशेषता को लागू करने के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<body>
<canvas id="newCanvas" width="400" height="200" style="border:3px dashed yellow">
HTML5 canvas tag isn't supported by your browser.
</canvas>
<script>
var c = document.getElementById("newCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF5655";
context.fillRect(100, 50, 60, 100);
</script>
</body>
</html> आउटपुट
उपरोक्त उदाहरण में, हमने एक कैनवास बनाया है और जावास्क्रिप्ट का उपयोग किया है -
<script>
var c = document.getElementById("newCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF5655";
context.fillRect(100, 50, 60, 100);
</script> इससे पहले हमने कैनवास आईडी को चौड़ाई और ऊंचाई के साथ सेट किया है -
<canvas id="newCanvas" width="400" height="200" style="border:3px dashed yellow"> HTML5 canvas tag isn't supported by your browser. </canvas>