हाई डीपीआई कैनवस

शुरुआती जानकारी

HiDPI स्क्रीन अच्छी होती है और वे हर चीज़ को शानदार और साफ़ बनाती हैं. साथ ही, इनसे डेवलपर को नई चुनौतियों का भी सामना करना पड़ता है. इस लेख में, हम HiDPI स्क्रीन के लिए, कैनवस में इमेज बनाने से जुड़ी खास चुनौतियों के बारे में जानेंगे.

devicePixelRatio की प्रॉपर्टी

चलिए, शुरुआत से करते हैं. इससे पहले कि हम HiDPI स्क्रीन करते थे, एक पिक्सल एक पिक्सल था (अगर हम ज़ूम और स्केलिंग को कुछ हद तक अनदेखा कर दें) और बस इतना ही, आपको कुछ भी बदलने की ज़रूरत नहीं थी. अगर आप किसी चीज़ को 100 पिक्सल चौड़ा सेट करते हैं, तो उसके पास बस इतना ही था. इसके बाद, पहले कुछ HiDPI मोबाइल हैंडसेट पॉप-अप होने लगे. इनकी मदद से, विंडो ऑब्जेक्ट पर devicePixelRatio की मामूली प्रॉपर्टी आई और मीडिया क्वेरी में भी इनका इस्तेमाल किया जा सकता है. इस प्रॉपर्टी से हमें पिक्सल वैल्यू (जिसे हम लॉजिकल पिक्सल वैल्यू कहते हैं) के अनुपात को समझने में मदद मिली. जैसे, सीएसएस, रेंडरिंग के समय इस्तेमाल किए जाने वाले असल पिक्सल में अनुवाद करेगी. iPhone 4S के मामले में, जिसमें PixelRatio 2 का डिवाइस है, आपको दिखेगा कि 100 पिक्सल की लॉजिकल वैल्यू, 200 पिक्सल डिवाइस वैल्यू के बराबर है.

यह दिलचस्प है, लेकिन हम डेवलपर के लिए इसका क्या मतलब है? शुरुआती दिनों में हम सभी ने यह महसूस किया कि हमारी इमेज इन डिवाइसों के ज़रिए बढ़ाई जा रही थीं. हम अपने एलिमेंट की लॉजिकल पिक्सल चौड़ाई में इमेज बना रहे थे. जब उन्हें ड्रॉ किया जाएगा, तब उन्हें devicePixelRatio की मदद से बड़ा किया जाएगा और वे धुंधली हो जाएंगी.

इसका असली हल यह है कि आप devicePixelRatio की मदद से इमेज को स्केल करें. इसके बाद, इमेज को उसी संख्या तक छोटा करने के लिए सीएसएस का इस्तेमाल करें. यही बात कैनवस के लिए भी लागू होती है!

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();