HTML <canvas> width অ্যাট্রিবিউট

<canvas> width অ্যাট্রিবিউট

<canvas> এলিমেন্টের width অ্যাট্রিবিউট ক্যানভাসের প্রস্থ (width) পিক্সেলে সেট করে। এটি ক্যানভাসের ড্রইং সারফেসের রেজোলিউশন নির্ধারণ করে, CSS width থেকে আলাদা।

সিনট্যাক্স

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

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <canvas id="myCanvas" width="400" height="200" style="border:3px dashed yellow">
    HTML5 canvas ট্যাগ আপনার ব্রাউজারে সাপোর্টেড নয়।
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF5655";
    ctx.fillRect(100, 50, 60, 100);
  </script>
</body>
</html>

আউটপুট

ব্যাখ্যা

<canvas id="myCanvas" width="400" height="200" style="border:3px dashed yellow"></canvas>

JavaScript-এ ক্যানভাস এক্সেস ও ড্রইং:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF5655";
ctx.fillRect(100, 50, 60, 100);

width vs CSS width

সেরা অনুশীলন: হাই-ডিপি (Retina) সাপোর্ট

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;

// ড্রইং বাফার রেজোলিউশন বাড়ান
canvas.width = 400 * dpr;
canvas.height = 200 * dpr;

// CSS সাইজ রাখুন অপরিবর্তিত
canvas.style.width = '400px';
canvas.style.height = '200px';

// কনটেক্সট স্কেল করুন
ctx.scale(dpr, dpr);

// এখন ড্রইং করুন — শার্প দেখাবে retina-এ
ctx.fillRect(100, 50, 60, 100);