উচ্চ ডিপিআই ক্যানভাস

ভূমিকা

HiDPI স্ক্রিনগুলি সুন্দর, তারা সবকিছুকে মসৃণ এবং পরিষ্কার দেখায়। কিন্তু তারা ডেভেলপারদের কাছে চ্যালেঞ্জের একটি নতুন সেটও উপস্থাপন করে। এই নিবন্ধে আমরা হাইডিপিআই স্ক্রীনের প্রেক্ষাপটে ক্যানভাসে ছবি আঁকার অনন্য চ্যালেঞ্জগুলির দিকে নজর দিতে যাচ্ছি।

ডিভাইস পিক্সেল রেশিও বৈশিষ্ট্য

শুরুতেই শুরু করা যাক। আমাদের কাছে HiDPI স্ক্রিন থাকার আগে একটি পিক্সেল ছিল একটি পিক্সেল (যদি আমরা একটুর জন্য জুমিং এবং স্কেলিং উপেক্ষা করি) এবং এটিই ছিল, আপনাকে সত্যিই আশেপাশে কিছু পরিবর্তন করতে হবে না। আপনি যদি 100px চওড়া হতে কিছু সেট করেন যে এটি ছিল সব ছিল. তারপরে প্রথম কয়েকটি HiDPI মোবাইল হ্যান্ডসেট উইন্ডো অবজেক্টে সামান্য রহস্যময় ডিভাইস পিক্সেল রেশিও বৈশিষ্ট্য সহ পপ আপ করা শুরু করে এবং মিডিয়া প্রশ্নে ব্যবহারের জন্য উপলব্ধ। এই বৈশিষ্ট্যটি আমাদের যা করতে দেয় তা হল কিভাবে পিক্সেল মান (যাকে আমরা লজিক্যাল পিক্সেল মান বলি) অনুপাত বুঝতে - বলুন - রেন্ডারিংয়ের সময় ডিভাইসটি ব্যবহার করা পিক্সেলের প্রকৃত সংখ্যায় CSS অনুবাদ করবে। একটি iPhone 4S এর ক্ষেত্রে, যার একটি ডিভাইস পিক্সেল অনুপাত 2, আপনি দেখতে পাবেন যে একটি 100px লজিক্যাল মান একটি 200px ডিভাইসের মানের সমান।

এটা আকর্ষণীয়, কিন্তু আমাদের ডেভেলপারদের জন্য এর মানে কি? ভাল প্রথম দিনগুলিতে আমরা সবাই লক্ষ্য করতে শুরু করেছি যে এই ডিভাইসগুলির দ্বারা আমাদের ছবিগুলিকে উন্নত করা হচ্ছে। আমরা আমাদের উপাদানগুলির যৌক্তিক পিক্সেল প্রস্থে চিত্রগুলি তৈরি করছিলাম এবং যখন সেগুলি আঁকতে হবে, তখন সেগুলিকে ডিভাইস পিক্সেল রেশিও দ্বারা উন্নত করা হবে এবং সেগুলি অস্পষ্ট হবে৷

এর প্রকৃত সমাধান হল ডিভাইসপিক্সেল রেশিও দ্বারা স্কেল করা ছবিগুলি তৈরি করা এবং তারপরে এটিকে একই পরিমাণে স্কেল করতে CSS ব্যবহার করা এবং ক্যানভাসের ক্ষেত্রেও এটি সত্য!

function setupCanvas(canvas) {
  // Get the device pixel ratio, falling back to 1.
  var dpr = window.devicePixelRatio || 1;
  // Get the size of the canvas in CSS pixels.
  var rect = canvas.getBoundingClientRect();
  // Give the canvas pixel dimensions of their CSS
  // size * the device pixel ratio.
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  var ctx = canvas.getContext('2d');
  // Scale all drawing operations by the dpr, so you
  // don't have to worry about the difference.
  ctx.scale(dpr, dpr);
  return ctx;
}

// Now this line will be the same size on the page
// but will look sharper on high-DPI devices!
var ctx = setupCanvas(document.querySelector('.my-canvas'));
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();