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

Aaron Krajeski

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

स्वीकार करना होगा कि एपीआई, बेहतरीन 2D ड्रॉइंग की सुविधा देने में थोड़ा पीछे है. अच्छी बात यह है कि हमने 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 का इस्तेमाल कभी न किया हो, कई सालों से किया हो या कई सालों से इसका इस्तेमाल न किया हो, हम आपको बताना चाहते हैं कि कैनवस को फिर से आज़माएं. यह एपीआई-नेक्स्ट-डोर है, जो हर समय मौजूद है.