কারণ: সাব-পিক্সেল রেন্ডারিং এবং ডিভাইস পিক্সেল রেশিও (DPR)
Canvas-এ কোঅর্ডিনেট পূর্ণসংখ্যা (integer) হলে পিক্সেল বাউন্ডারির মাঝপথে পড়ে, যা অ্যান্টি-এলিয়াসিং করে ব্লারি লাইন তৈরি করে। সমাধান: ০.৫ পিক্সেল অফসেট বা HiDPI স্কেলিং।
সমাধান ১: ০.৫ পিক্সেল অফসেট (Crisp Lines)
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1; // ১ (স্ট্যান্ডার্ড), ২ (Retina), ৩ (প্লাস)
// ১. ক্যানভাসের আসল পিক্সেল সাইজ বড় করুন
canvas.width = 250 * dpr;
canvas.height = 250 * dpr;
// ২. CSS-এ ডিসপ্লে সাইজ নরমাল রাখুন
canvas.style.width = '250px';
canvas.style.height = '250px';
// ৩. কনটেক্সট স্কেল করুন
ctx.scale(dpr, dpr);
// এখন আঁকুন — সব কিছু شار্প দেখাবে
ctx.lineWidth = 1; // ডিপিএর-সвяজ্ড (১ CSS পিক্সেল = ১ ডিভাইস পিক্সেল)
সমাধান ৩: `imageSmoothingEnabled = false` (পিক্সেল আর্ট/করিপ লাইন)
