HTML <canvas> width एट्रिब्यूट: कैनवास चौड़ाई सेट करना

<canvas> width एट्रिब्यूट

width एट्रिब्यूट <canvas> एलिमेंट की चौड़ाई पिक्सेल्स में निर्दिष्ट करता है। यह कैनवास के ड्राइंग सरफेस (ड्राइंग बफर) का वास्तविक रिज़ॉल्यूशन निर्धारित करता है, CSS width से अलग।

सिंटैक्स

<canvas width="pixels_value"></canvas>

उदाहरण: 400x200 कैनवास पर लाल आयत

<!DOCTYPE html>
<html>
<body>
  <canvas id="newCanvas" width="400" height="200" style="border:3px dashed yellow">
    HTML5 canvas टैग आपके ब्राउज़र द्वारा समर्थित नहीं है।
  </canvas>
  <script>
    var c = document.getElementById("newCanvas");
    var context = c.getContext("2d");
    context.fillStyle = "#FF5655";
    context.fillRect(100, 50, 60, 100);
  </script>
</body>
</html>

आउटपुट

पीले डैश्ड बॉर्डर वाला 400x200 कैनवास जिस पर (100,50) पर 60x100 लाल आयत है।

महत्वपूर्ण: width एट्रिब्यूट vs CSS width

सर्वोत्तम अभ्यास

// सही: एट्रिब्यूट और CSS दोनों सेट करें, समान मान
<canvas id="c" width="800" height="600" style="width:800px;height:600px;"></canvas>

// या CSS से एट्रिब्यूट सेट करें (हाई-DPI के लिए)
const canvas = document.getElementById('c');
const dpr = window.devicePixelRatio || 1;
canvas.width = 800 * dpr;
canvas.height = 600 * dpr;
canvas.style.width = '800px';
canvas.style.height = '600px';
ctx.scale(dpr, dpr);

नोट

width/height एट्रिब्यूट्स न होने पर डिफ़ॉल्ट 300x150 होता है। CSS से आकार बदलने पर ड्राइंग धुंधली हो सकती है।