Canvas2D हमेशा से आप ही रहे हैं

Aaron Krajeski

शेडर, मेश, और फ़िल्टर की दुनिया में, हो सकता है कि Canvas2D आपका ध्यान न खींचे. लेकिन ऐसा होना चाहिए! 30 से 40% वेब पेजों में <canvas> एलिमेंट होता है. साथ ही, 98% कैनवस, Canvas2D रेंडरिंग कॉन्टेक्स्ट का इस्तेमाल करते हैं. Canvas2D, कार, फ़्रिज, और स्पेस में भी मौजूद हैं.

स्वीकार करना होगा कि एपीआई, बेहतरीन 2D ड्रॉइंग की सुविधा देने में थोड़ा पीछे है. सौभाग्य से, हम CSS के साथ-साथ काम करने के लिए, Canvas2D में नई सुविधाएं लागू करने पर लगातार काम कर रहे हैं. इससे, उपयोगकर्ताओं के लिए बेहतर अनुभव मिलता है और परफ़ॉर्मेंस भी बेहतर होती है.

पहला भाग: सीएसएस के बारे में जानकारी

सीएसएस में कुछ ड्रॉइंग निर्देश हैं, जो Canvas2D में मौजूद नहीं हैं. नए एपीआई में, हमने सबसे ज़्यादा अनुरोध की गई कुछ सुविधाएं जोड़ी हैं:

राउंड रेक्टैंगल

गोल कोनों वाले आयत: इंटरनेट, कंप्यूटिंग, और सभ्यता के कोने-कोने में मौजूद.

राउंड किए गए रेक्टैंगल बहुत काम के होते हैं: बटन, चैट बबल, थंबनेल, और स्पीच बबल के तौर पर. Canvas2D में, पहले से ही राउंडेड रेक्टैंगल बनाया जा सकता था. हालांकि, इसमें थोड़ी परेशानी होती थी:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'magenta';

const top = 10;
const left = 10;
const width = 200;
const height = 100;
const radius = 20;

ctx.beginPath();
ctx.moveTo(left + radius, top);
ctx.lineTo(left + width - radius, top);
ctx.arcTo(left + width, top, left + width, top + radius, radius);
ctx.lineTo(left + width, top + height - radius);
ctx.arcTo(left + width, top + height, left + width - radius, top + height, radius);
ctx.lineTo(left + radius, top + height);
ctx.arcTo(left, top + height, left, top + height - radius, radius);
ctx.lineTo(left, top + radius);
ctx.arcTo(left, top, left + radius, top, radius);
ctx.stroke();

एक छोटे और आसान राउंडेड रेक्टैंगल के लिए, यह सब ज़रूरी था:

नए एपीआई में, roundRect() तरीका है.

ctx.roundRect(upper, left, width, height, borderRadius);

इसलिए, ऊपर दिए गए कोड को पूरी तरह से इस तरह बदला जा सकता है:

ctx.roundRect(10, 10, 200, 100, 20);

ctx.roundRect() तरीका, borderRadius आर्ग्युमेंट के लिए ज़्यादा से ज़्यादा चार संख्याओं वाला कलेक्शन भी लेता है. ये त्रिज्याएं, राउंडेड रेक्टैंगल के चारों कोनों को उसी तरह कंट्रोल करती हैं जिस तरह सीएसएस में किया जाता है. उदाहरण के लिए:

ctx.roundRect(10, 10, 200, 100, [15, 50, 30]);

इसका डेमो देखें और आज़माएं!

कॉनिक ग्रेडिएंट

आपने लीनियर ग्रेडिएंट देखे हैं:

const gradient = ctx.createLinearGradient(0, 0, 200, 100);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'magenta');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

रेडियल ग्रेडिएंट:

const radialGradient = ctx.createRadialGradient(150, 75, 10, 150, 75, 70);
radialGradient.addColorStop(0, 'white');
radialGradient.addColorStop(0.5, 'magenta');
radialGradient.addColorStop(1, 'lightblue');

ctx.fillStyle = radialGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

लेकिन, एक अच्छा शंकु ग्रेडिएंट कैसा दिखेगा?

const grad = ctx.createConicGradient(0, 100, 100);

grad.addColorStop(0, 'red');
grad.addColorStop(0.25, 'orange');
grad.addColorStop(0.5, 'yellow');
grad.addColorStop(0.75, 'green');
grad.addColorStop(1, 'blue');

ctx.fillStyle = grad;
ctx.fillRect(0, 0, 200, 200);

टेक्स्ट में बदलाव करने वाले टूल

Canvas2Ds की टेक्स्ट रेंडरिंग की सुविधाएं बहुत पीछे हैं. Chrome ने Canvas2D टेक्स्ट रेंडरिंग में कई नए एट्रिब्यूट जोड़े हैं:

• ctx.letterSpacing
• ctx.wordSpacing
• ctx.fontVariant
• ctx.fontKerning
• ctx.fontStretch
• ctx.textDecoration
• ctx.textUnderlinePosition
• ctx.textRendering

ये सभी एट्रिब्यूट, सीएसएस के उन एट्रिब्यूट से मेल खाते हैं जिनके नाम एक जैसे होते हैं.

दूसरा भाग: काम करने के तरीके में बदलाव

पहले, Canvas2D की मदद से कुछ काम किए जा सकते थे, लेकिन उन्हें लागू करना मुश्किल था. Canvas2D का इस्तेमाल करने वाले JavaScript डेवलपर के लिए, यहां कुछ सुधार किए गए हैं:

कॉन्टेक्स्ट रीसेट करना

कैनवस को खाली करने के बारे में बताने के लिए, मैंने एक छोटा सा फ़ंक्शन लिखा है, ताकि कोई रेट्रो पैटर्न बनाया जा सके:

draw90sPattern();

बढ़िया! अब मुझे उस पैटर्न को मिटाकर, कैनवस पर कुछ और बनाना है. रुकिए, हम कैनवस को फिर से कैसे मिटाते हैं? अरे वाह! ctx.clearRect(), बिल्कुल.

ctx.clearRect(0, 0, canvas.width, canvas.height);

ओह… ऐसा नहीं हो सका. अरे वाह! मुझे पहले ट्रांसफ़ॉर्म को रीसेट करना होगा:

ctx.resetTransform();
ctx.clearRect(0, 0, canvas.width, canvas.height);

बढ़िया! एक अच्छा खाली कैनवस. अब एक अच्छी हॉरिज़ॉन्टल लाइन बनाना शुरू करते हैं:

ctx.moveTo(10, 10);
ctx.lineTo(canvas.width, 10);
ctx.stroke();

धत्त! यह सही नहीं है! 😡 यहां अतिरिक्त लाइन क्यों दिख रही है? साथ ही, यह गुलाबी रंग का क्यों है? ठीक है, आइए हम StackOverflow पर जाकर देखें.

canvas.width = canvas.width;

यह इतना बेवकूफ़ी भरा क्यों है? यह इतना मुश्किल क्यों है?

अब ऐसा नहीं है. नए एपीआई की मदद से, हम आपको ये सुविधाएं दे रहे हैं:

ctx.reset();

माफ़ करें, इसमें इतना समय लग गया.

फ़िल्टर

SVG फ़िल्टर की अपनी एक दुनिया है. अगर आपने पहले कभी एसवीजी फ़िल्टर का इस्तेमाल नहीं किया है, तो हमारा सुझाव है कि आप एसवीजी फ़िल्टर का इस्तेमाल करने का तरीका और यह कितना बेहतर है लेख पढ़ें. इसमें एसवीजी फ़िल्टर के इस्तेमाल की कुछ बेहतरीन संभावनाओं के बारे में बताया गया है.

Canvas2D के लिए, SVG स्टाइल फ़िल्टर पहले से उपलब्ध हैं! आपको बस फ़िल्टर को पेज पर मौजूद किसी दूसरे SVG फ़िल्टर एलिमेंट पर ले जाने वाले यूआरएल के तौर पर पास करना होगा:

<svg>
  <defs>
    <filter id="svgFilter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      <feConvolveMatrix kernelMatrix="-3 0 0 0 0.5 0 0 0 3" />
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

ctx.filter = "url('#svgFilter')";
draw90sPattern(ctx);

इससे हमारे पैटर्न में काफ़ी गड़बड़ी होती है:

अगर आपको ऊपर बताई गई प्रोसेस को JavaScript में ही करना है और आपको स्ट्रिंग के साथ काम नहीं करना है, तो क्या होगा? नए एपीआई की मदद से, ऐसा किया जा सकता है.

ctx.filter = new CanvasFilter([
  { filter: 'gaussianBlur', stdDeviation: 5 },
  {
    filter: 'convolveMatrix',
    kernelMatrix: [
      [-3, 0, 0],
      [0, 0.5, 0],
      [0, 0, 3],
    ],
  },
  { filter: 'colorMatrix', type: 'hueRotate', values: 90 },
]);

यह बहुत आसान है! इसे आज़माएं और यहां दिए गए डेमो में पैरामीटर के साथ एक्सपेरिमेंट करें.

तीसरा भाग: परफ़ॉर्मेंस में सुधार

हम चाहते थे कि जहां भी हो सके, Canvas2D API की मदद से परफ़ॉर्मेंस को बेहतर बनाया जाए. हमने कुछ सुविधाएं जोड़ी हैं, ताकि डेवलपर अपनी वेबसाइटों को बेहतर तरीके से कंट्रोल कर सकें और सबसे बेहतर फ़्रेमरेट का इस्तेमाल कर सकें:

अक्सर पढ़ा जाएगा

कैनवस से पिक्सल डेटा वापस पढ़ने के लिए, getImageData() का इस्तेमाल करें. यह बहुत धीमा हो सकता है. नए एपीआई की मदद से, किसी कैनवस को साफ़ तौर पर मार्क करके, उसे फिर से पढ़ा जा सकता है. उदाहरण के लिए, जनरेटिव इफ़ेक्ट के लिए. इससे, कैनवस को बेहतर तरीके से ऑप्टिमाइज़ किया जा सकता है. साथ ही, अलग-अलग तरह के इस्तेमाल के उदाहरणों के लिए, कैनवस को तेज़ रखा जा सकता है. यह सुविधा Firefox में कुछ समय से उपलब्ध है. अब हम इसे कैनवस के स्पेसिफ़िकेशन का हिस्सा बना रहे हैं.

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d', { willReadFrequently: true });

कॉन्टेक्स्ट का नुकसान

आइए, उदास टैब को फिर से खुश करते हैं! अगर किसी क्लाइंट की GPU मेमोरी खत्म हो जाती है या आपके कैनवस में कोई और समस्या आती है, तो अब आपको कॉलबैक मिल सकता है और ज़रूरत के हिसाब से फिर से ड्रॉ किया जा सकता है:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('contextlost', onContextLost);
canvas.addEventListener('contextrestored', redraw);

अगर आपको कैनवस कॉन्टेक्स्ट और लॉस के बारे में ज़्यादा पढ़ना है, तो WHATWG के विकी पर इसके बारे में अच्छी जानकारी दी गई है.

नतीजा

भले ही, आपने Canvas2D का इस्तेमाल कभी न किया हो, कई सालों से किया हो या कई सालों से इसका इस्तेमाल न किया हो, हम आपको बताना चाहते हैं कि कैनवस को फिर से देखें. यह API-next-door है, जो हमेशा से मौजूद है.