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

Paul Lewis

परिचय

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

devicePixelRatio प्रॉपर्टी

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

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

पहली इमेज - 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();