🖱️ 🚶🏻 👧🏿 HTML5 कैनवास प्रदर्शन में सुधार 🌶️ 🥉 😤

हाल ही में, मैं अनुवाद के लिए दिलचस्प लेखों के लिए पर्याप्त भाग्यशाली हूं। इस बार, HTML5 कैनवास प्रदर्शन पर एक HTML5Rocks लेख। लेखक एक निश्चित दीवार के बारे में लिखता है, जो डेवलपर्स अनुप्रयोगों को बनाते समय आराम करते हैं। कुछ समय पहले, मैं एक पुराने खेल को कैनवस में पोर्ट करते समय भी उसमें चला गया था।

दुर्भाग्य से, मूल में ग्राफिक्स एक iframe के माध्यम से डाला जाता है। मैं चित्र ले सकता था और उनकी छवियां रख सकता था, लेकिन लेखक स्वयं ही ग्राफ़ को प्रासंगिक बनाता है और जिन्हें अपडेट किया जाएगा, इसलिए मैंने सिर्फ उनके लिए लिंक पोस्ट किए हैं। अच्छा पढ़ लो!

प्रविष्टि

HTML5 कैनवास, जो एक Apple प्रयोग के रूप में शुरू हुआ, इंटरनेट पर 2D प्रत्यक्ष ग्राफिक्स के लिए सबसे व्यापक रूप से स्वीकृत मानक है। कई डेवलपर्स इसे मल्टीमीडिया प्रोजेक्ट्स, विज़ुअलाइज़ेशन और गेम्स की एक विस्तृत श्रृंखला में उपयोग करते हैं। हो सकता है कि अनुप्रयोगों की बढ़ती जटिलता के साथ, डेवलपर्स अनजाने में प्रदर्शन की दीवार पर ठोकर खाएं।

कैनवास अनुकूलन के कई बिखरे हुए "ट्रिक्स" हैं। यह लेख डेवलपर्स के लिए अधिक पठनीय संसाधन बनाने के लिए उन्हें एक साथ लाने का लक्ष्य रखता है। इस लेख में दोनों मूलभूत अनुकूलन शामिल हैं जो कंप्यूटर ग्राफिक्स के सभी क्षेत्रों और कैनवास के लिए विशिष्ट तकनीकों पर लागू होते हैं जो कैनवास कार्यान्वयन के रूप में बदलते हैं। विशेष रूप से, जैसा कि GPU त्वरण का उपयोग किया जाता है, वर्णित तकनीकों में से कुछ कम प्रासंगिक हो जाएंगे। यदि आवश्यक हो तो यह इंगित किया जाएगा।

ध्यान रखें यह लेख HTML5 कैनवास ट्यूटोरियल नहीं है। लेकिन आप HTML5Rocks पर संबंधित लेखों का अध्ययन कर सकते हैं, इस अध्याय को HTML5 में गोता लगाएँ और MDN पर पाठ।

प्रदर्शन परीक्षण

एचटीएमएल 5 कैनवास की तेजी से पुस्तक की दुनिया में, JSPerf ( jsperf.com ) यह सत्यापित करने में मदद करता है कि प्रस्तावित सभी अनुकूलन काम करते हैं। JSPerf एक वेब एप्लिकेशन है जो डेवलपर्स को जावास्क्रिप्ट प्रदर्शन परीक्षण लिखने की अनुमति देता है। प्रत्येक परीक्षण उस परिणाम पर केंद्रित होता है जिसे आप प्राप्त करने की कोशिश कर रहे हैं (उदाहरण के लिए, कैनवास की सफाई) और विभिन्न दृष्टिकोण शामिल हैं। JSPerf प्रत्येक विकल्प को यथासंभव कम समय में चलाता है और प्रति सेकंड पुनरावृत्तियों की एक सांख्यिकीय संख्या प्रदर्शित करता है। अधिक हमेशा बेहतर होता है!

JSPerf पृष्ठ पर आने वाले लोग अपने ब्राउज़र पर परीक्षण चला सकते हैं और JSPerf को Browserscope (browsercope.org) पर सामान्यीकृत परिणामों को संग्रहीत करने की अनुमति दे सकते हैं। चूंकि इस लेख में अनुकूलन तकनीक JSPerf पर संग्रहीत हैं, आप हमेशा वापस जा सकते हैं और नवीनतम जानकारी देख सकते हैं कि क्या यह या वह तकनीक अभी भी लागू है। मैंने एक छोटा सहायक अनुप्रयोग लिखा जो इन परिणामों को लेख में उपयोग किए गए ग्राफ़ के रूप में प्रदर्शित करता है।

इस आलेख में सभी प्रदर्शन परीक्षण परिणाम ब्राउज़र संस्करण से बंधे हैं। यह सीमा प्रतीत होती है, क्योंकि हम नहीं जानते कि ओएस किस ब्राउज़र के तहत लॉन्च किया गया था, या इससे भी महत्वपूर्ण बात यह है कि जब परीक्षण किया गया था, तो एचटीएमएल 5 कैनवास हार्डवेयर त्वरण चालू था या नहीं। एड्रेस बार में about:gpu लिखकर आप यह निर्धारित कर सकते हैं कि क्रोम में हार्डवेयर त्वरण सक्षम है या नहीं।

वर्चुअल कैनवास में प्री-रेंडर

यदि आप कई फ़्रेमों पर स्क्रीन पर समान प्राइमिटिव्स खींचते हैं (जैसा कि गेम लिखते समय अक्सर होता है), तो आप बड़े हिस्सों को ऑफ़-स्टेज खींचकर महत्वपूर्ण प्रदर्शन लाभ प्राप्त कर सकते हैं। प्रारंभिक रेंडरिंग में आभासी (या आभासी) कैनवस का उपयोग होता है, जिस पर अस्थायी चित्र खींचे जाते हैं, और फिर वर्चुअल कैनवस को दृश्यमान में कॉपी किया जाता है। कंप्यूटर ग्राफिक्स से परिचित लोगों के लिए, इस तकनीक को प्रदर्शन सूची के रूप में भी जाना जाता है।

उदाहरण के लिए, मान लीजिए कि आपने मारियो को 60 फ्रेम प्रति सेकेंड पर फिर से तैयार किया है। आप प्रत्येक फ्रेम में उसकी टोपी, मूंछें और "एम" खींच सकते हैं या एनीमेशन शुरू करने से पहले इसे खींच सकते हैं।

बिना पूर्व-प्रतिपादन:

 // canvas, context are defined function render() { drawMario(context); requestAnimationFrame(render); }

पूर्व प्रतिपादन:

 var m_canvas = document.createElement('canvas'); m_canvas.width = 64; m_canvas.height = 64; var m_context = m_canvas.getContext('2d'); drawMario(m_context); function render() { context.drawImage(m_canvas, 0, 0); requestAnimationFrame(render); }

RequestAnimationFrame पर ध्यान दें, जिसके उपयोग को थोड़ी देर बाद और अधिक विवरण में वर्णित किया जाएगा। निम्न ग्राफ़ पूर्व-प्रतिपादन ( jsperf ) का उपयोग करने के लाभों को प्रदर्शित करता है: ग्राफ़ ।

यह तकनीक विशेष रूप से प्रभावी है जब रेंडरिंग मुश्किल है (ड्रामेरियो)। एक अच्छा उदाहरण पाठ प्रदान कर रहा है, जो एक बहुत महंगा ऑपरेशन है। प्री-रेंडरिंग टेक्स्ट ( jsperf ): ग्राफ़ का उपयोग करते समय प्रदर्शन में नाटकीय रूप से वृद्धि कैसे होती है

जैसा कि यह हो सकता है, आप पहले से रेंडर किए गए ढीले परीक्षण के कम प्रदर्शन से ऊपर के उदाहरण में देख सकते हैं। प्री-रेंडरिंग करते समय, यह सुनिश्चित करना ज़रूरी है कि आपके अस्थायी कैनवास में आपकी छवि के लिए "तंग" आकार हो, अन्यथा प्रदर्शन लाभ एक बड़े कैनवास को दूसरे की नकल करते समय (जो कि लक्ष्य कैनवास के आकार के एक फ़ंक्शन की तरह दिखता है) कॉपी करते हैं। उपरोक्त उदाहरण के लिए एक उपयुक्त कैनवास कम है:

 can2.width = 100; can2.height = 40;

बड़े की तुलना में:

 can3.width = 300; can3.height = 100;

समूह कॉल

चूंकि प्रतिपादन एक महंगा ऑपरेशन है, इसलिए ड्रॉइंग स्टेट मशीन को आदेशों की लंबी सूची के साथ लोड करना अधिक कुशल है, और फिर उन्हें वीडियो बफर पर अपलोड करें।

उदाहरण के लिए, कई रेखाएँ खींचते समय, सभी रेखाओं के साथ एक पथ बनाना और एक कॉल में आकर्षित करना बेहतर होता है। दूसरे शब्दों में, व्यक्तिगत रेखाएँ खींचने की तुलना में:

 for (var i = 0; i < points.length - 1; i++) { var p1 = points[i]; var p2 = points[i+1]; context.beginPath(); context.moveTo(p1.x, p1.y); context.lineTo(p2.x, p2.y); context.stroke(); }

एक पॉलीलाइन ड्रा करना बेहतर है:

 context.beginPath(); for (var i = 0; i < points.length - 1; i++) { var p1 = points[i]; var p2 = points[i+1]; context.moveTo(p1.x, p1.y); context.lineTo(p2.x, p2.y); } context.stroke();

यह कैनवास पर भी लागू होता है। उदाहरण के लिए, एक जटिल रास्ता बनाते समय, खंडों को अलग-अलग खींचने के लिए तुरंत उस पर सभी बिंदुओं को रखना बेहतर होता है ( jsperf : graph )।

लेकिन ध्यान रखें कि कैनवस के साथ इस नियम का एक महत्वपूर्ण अपवाद है: यदि खींची जा रही वस्तु के प्राइमेटिक्स के पास छोटे आयताकार (बाउंडिंग बॉक्स) हैं, तो उन्हें अलग से खींचने के लिए अधिक कुशल हो सकता है ( jsperf ) - ग्राफ ।

अनावश्यक अवस्था परिवर्तन से बचें

कैनवस को एक राज्य मशीन के आधार पर लागू किया जाता है, जो भरण और स्ट्रोक शैलियों जैसी चीज़ों को ट्रैक करता है, साथ ही पिछले बिंदु जो वर्तमान पथ बनाते हैं। अनुकूलन करने की कोशिश करते समय, ड्राइंग पर ध्यान केंद्रित करने का प्रलोभन होता है। लेकिन राज्य मशीन के साथ जोड़तोड़ करने से लागत भी आती है।

यदि आप एक दृश्य में कई फिल रंगों का उपयोग करते हैं, तो यह कैनवास पर स्थान के अनुसार रंग से पेंट करना सस्ता है। एक उथले पट्टी में एक बनावट खींचने के लिए, आप एक रेखा खींच सकते हैं, रंग बदल सकते हैं, अगले और इतने पर आकर्षित कर सकते हैं:

 for (var i = 0; i < STRIPES; i++) { context.fillStyle = (i % 2 ? COLOR1 : COLOR2); context.fillRect(i * GAP, 0, GAP, 480); }

या सभी सम और विषम बैंड बनाएं:

 context.fillStyle = COLOR1; for (var i = 0; i < STRIPES/2; i++) { context.fillRect((i*2) * GAP, 0, GAP, 480); } context.fillStyle = COLOR2; for (var i = 0; i < STRIPES/2; i++) { context.fillRect((i*2+1) * GAP, 0, GAP, 480); }

इन तरीकों की तुलना निम्नलिखित परीक्षण ( jsperf ) में प्रस्तुत की गई है: ग्राफ़ ।

जैसा कि अपेक्षित था, सड़क की स्थिति में हेरफेर के बाद से पहला विकल्प धीमा है।

केवल अंतर को ड्रा करें, संपूर्ण कैनवास को नहीं

जैसा कि आप कल्पना कर सकते हैं कि हम जितना छोटा स्क्रीन खींचेंगे, वह उतना ही सस्ता होगा। यदि आपके पास रिडर्व्स के बीच केवल मामूली अंतर है, तो आप केवल अंतर का प्रतिपादन करके एक महत्वपूर्ण प्रदर्शन को बढ़ावा दे सकते हैं। दूसरे शब्दों में, रेंडर करने से पहले पूरी स्क्रीन को साफ करने की तुलना में:

 context.fillRect(0, 0, canvas.width, canvas.height);

ड्रा करने योग्य के बाउंडिंग बॉक्स को देखें और केवल इसे साफ़ करें।

 context.fillRect(last.x, last.y, last.width, last.height);

यह निम्नलिखित परीक्षण में दिखाया गया है, जिसमें स्क्रीन के पार एक सफेद बिंदु ( jsperf ): ग्राफ शामिल है ।

यदि आप कंप्यूटर ग्राफिक्स में अच्छे हैं, तो आपको "रिड्रा रीजन" नामक इस तकनीक को जानना चाहिए, जिसमें पिछले बाउंडिंग बॉक्स को बचाया जाता है और फिर हर रेंडरिंग के साथ क्लियर किया जाता है।

निंटेंडो जावास्क्रिप्ट एमुलेटर की इस चर्चा में यह तकनीक पिक्सेल-दर-पिक्सेल रेंडरिंग पर भी लागू होती है।

जटिल दृश्यों के लिए स्तरित कैनवास का उपयोग करें

जैसा कि पहले उल्लेख किया गया है, बड़ी छवियों को प्रस्तुत करना महंगा है और इसे टाला जाना चाहिए। एक ऑफ-स्क्रीन बफर (प्री-रेंडरिंग सेक्शन) का उपयोग करने के अलावा, हम एक दूसरे के ऊपर खड़ी कैनवस का उपयोग कर सकते हैं। शीर्ष परत की पारदर्शिता का उपयोग करते हुए, हम रेंडरिंग के दौरान अल्फा चैनल को लागू करने के लिए GPU पर भरोसा कर सकते हैं। आप इसका उपयोग एक दूसरे के ऊपर दो बिल्कुल तैनात कैनवस के साथ करते हैं, जैसे कि यहाँ:

 <canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0"> </canvas> <canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1"> </canvas>

एक एकल कैनवास पर लाभ यह है कि जब शीर्ष को रेंडर या साफ किया जाता है, तो हम पृष्ठभूमि को प्रभावित नहीं करते हैं। यदि गेम या मल्टीमीडिया एप्लिकेशन को 2 परतों में विभाजित किया जा सकता है, तो महत्वपूर्ण प्रदर्शन को बढ़ावा देने के लिए उन्हें विभिन्न कैनवस में खींचना बेहतर होता है। निम्न ग्राफ़ एक कैनवास और एक के साथ भोले संस्करण की तुलना करता है और जहाँ आप आवश्यकतानुसार शीर्ष परत ( jsperf ) को फिर से बनाते हैं या साफ़ करते हैं: ग्राफ़ ।

अक्सर आप एक दोषपूर्ण मानवीय धारणा से लाभ उठा सकते हैं और पृष्ठभूमि को केवल एक बार या शीर्ष परत की तुलना में कम बार आकर्षित कर सकते हैं (जो कि उपयोगकर्ता का सबसे अधिक ध्यान आकर्षित करता है)। उदाहरण के लिए, आप पृष्ठभूमि को केवल 1 बार खींचने के लिए शीर्ष परत को रेंडर कर सकते हैं।

यदि यह एप्लिकेशन इस तरह की संरचना के साथ बेहतर काम करता है, तो यह विधि किसी भी अन्य परतों पर भी लागू होती है।

छायावाद से बचें

अन्य चित्रमय वातावरणों की तरह, HTML5 कैनवास डेवलपर्स को आदिम धुंधला करने की अनुमति देता है, लेकिन यह ऑपरेशन बहुत महंगा है:

 context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = 'rgba(255, 0, 0, 0.5)'; context.fillRect(20, 20, 150, 100);

परीक्षण छाया के साथ और बिना प्रदर्शन के एक ही दृश्य और प्रदर्शन ( निर्णायक ) में एक निर्णायक अंतर दिखाता है : ग्राफ ।

स्क्रीन को साफ़ करने के विभिन्न तरीके

चूंकि कैनवास तत्काल ग्राफिक्स मोड का प्रतिमान है , इसलिए दृश्य को प्रत्येक फ्रेम में पुनः तैयार किया जाना चाहिए। इस वजह से, कैनवास की सफाई अनुप्रयोगों और खेलों में मूलभूत महत्व का एक ऑपरेशन है।

जैसा कि अनावश्यक राज्य परिवर्तन से बचें अनुभाग में कहा गया है, संपूर्ण कैनवास को साफ़ करना अक्सर अवांछनीय होता है, लेकिन यदि आपको ऐसा करना चाहिए, तो दो तरीके हैं: कॉल संदर्भ ।clearRect (0, 0, चौड़ाई, ऊंचाई) या हैक का उपयोग करें: कैनवस = कैनवास इनवॉइस।

लेखन के समय, ClearRect चौड़ाई रीसेट से आगे निकल जाता है, लेकिन, कुछ मामलों में, Chrome 14 ( jsperf ): ग्राफ़ में चौड़ाई रीसेट का उपयोग करना अधिक तेज़ है।

इन चालों से सावधान रहें, क्योंकि यह कैनवास के कार्यान्वयन पर अत्यधिक निर्भर है। अधिक जानकारी के लिए, कैनवस की सफाई पर साइमन सरिस का लेख देखें।

गैर-पूर्णांक निर्देशांक से बचें

एचटीएमएल 5 कैनवास उप-पिक्सेल रेंडरिंग का समर्थन करता है और इसे अक्षम करने का कोई तरीका नहीं है। यदि आप गैर-पूर्णांक निर्देशांक के साथ आकर्षित करते हैं, तो यह स्वचालित रूप से लाइनों को सुचारू करने के लिए एंटी-अलियासिंग का उपयोग करता है। यहाँ उप-पिक्सेल प्रदर्शन का दृश्य सेबी ली-डेलिसल के लेख से लिया गया है :
करगोश

यदि एक चिकना स्प्राइट वह नहीं है जिसकी आपको आवश्यकता है, तो Math.floor या Math.round ( jsperf ) का उपयोग करके अपने निर्देशांक का अनुवाद करना अधिक तेज़ होगा: एक ग्राफ़ ।

गैर-पूर्णांक निर्देशांक को पूर्णांक वाले में अनुवाद करने के लिए, कई मजाकिया तकनीकें हैं, जिनमें से अधिकांश संख्याओं में आधा जोड़ने और बिट्स संचालन को लागू करने पर आधारित हैं।

 // With a bitwise or. rounded = (0.5 + somenum) | 0; // A double bitwise not. rounded = ~~ (0.5 + somenum); // Finally, a left bitwise shift. rounded = (0.5 + somenum) << 0;

यहाँ ( jsperf ) प्रदर्शन का पूर्ण विराम : ग्राफ़ ।

यह अनुकूलन विधि अब उस समय से समझ में नहीं आएगी जब कैनवास कार्यान्वयन जीपीयू-त्वरित हो जाते हैं, जो आपको गैर-पूर्णांक निर्देशांक जल्दी से आकर्षित करने की अनुमति देता है।

'RequestAnimationFrame' के साथ एनिमेशन का अनुकूलन करें

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

RequestAnimationFrame कॉल 60 एफपीएस को लक्षित करता है, लेकिन इसकी गारंटी नहीं देता है, इसलिए आपको अंतिम रेंडर के बाद कितना समय बीत चुका है, इसका ट्रैक रखना होगा। यह इस तरह लग सकता है:

  var x = 100; var y = 100; var lastRender = new Date(); function render() { var delta = new Date() - lastRender; x += delta; y += delta; context.fillRect(x, y, W, H); requestAnimationFrame(render); } render();

ध्यान रखें कि requestAnimationFrame का उपयोग कैनवास और वेबलॉग जैसी अन्य तकनीकों पर लागू होता है।

लेखन के समय, एपीआई केवल क्रोम, सफारी और फ़ायरफ़ॉक्स के लिए उपलब्ध था, इसलिए आपको इसे सावधानी से उपयोग करना चाहिए ।

अधिकांश मोबाइल कैनवास कार्यान्वयन धीमा हैं

मोबाइल प्लेटफॉर्म की बात करते हैं। दुर्भाग्य से, लेखन के समय, सफारी 5.1 के साथ केवल आईओएस 5.0 बीटा में कैनवास हार्डवेयर त्वरण का उपयोग किया गया था। इसके बिना, मोबाइल ब्राउज़र में आधुनिक कैनवास अनुप्रयोगों के लिए पर्याप्त रूप से शक्तिशाली सीपीयू नहीं है। ऊपर दिए गए कुछ परीक्षण उस क्रम को प्रदर्शित करते हैं जिसमें डेस्कटॉप की तुलना में मोबाइल प्लेटफ़ॉर्म प्रदर्शन कम हो जाता है, क्रॉस-प्लेटफ़ॉर्म अनुप्रयोगों के प्रकारों को काफी सीमित कर देता है जो सफल होने की उम्मीद की जा सकती है।

निष्कर्ष

इस लेख में उपयोगी अनुकूलन के एक व्यापक सेट को शामिल किया गया है जो आपको उत्पादक HTML5 कैनवास अनुप्रयोगों को विकसित करने में मदद करेगा। अब जब आपने यहां कुछ नया सीखा है, तो आगे बढ़ें और अपनी अविश्वसनीय कृतियों का अनुकूलन करें। या, यदि आपके पास अभी तक कोई गेम या ऑप्टिमाइज़ेशन ऐप नहीं है, तो प्रेरणा के लिए Chrome प्रयोग या क्रिएटिव JS देखें ।

संदर्भ

तत्काल मोड बनाम बनाए रखा मोड।
अन्य HTML5Rocks कैनवास लेख ।
HTML5 में गोता का कैनवस अनुभाग ।
JSPerf डेवलपर्स को JS प्रदर्शन परीक्षण बनाने देता है।
ब्राउज़र प्रदर्शन डेटा को ब्राउज़ करता है।
JSPerfView , जो चार्ट के रूप में JSPerf परीक्षणों का प्रतिपादन करता है।
कैनवस क्लीयर करने पर साइमन का ब्लॉग पोस्ट ।
सब-पिक्सेल रेंडरिंग प्रदर्शन पर सेबेस्टियन का ब्लॉग पोस्ट ।
requestAnimationFrame उपयोग पर पॉल का ब्लॉग पोस्ट ।
जेएस एनईएस एमुलेटर को अनुकूलित करने के बारे में बेन की बात ।

पसंदीदा टिप्पणियाँ

Mikenerevarin #

मोबाइल उपकरणों पर, स्थिति बिल्कुल विपरीत है - बहुपरत कैनवास बहुत धीमा है, आपको पृष्ठभूमि के लिए 1 + दृश्य पूर्वेंडर का उपयोग करना होगा (और div के पीछे कैनवास का आकार है और इसके नीचे स्थित है, क्योंकि अनावश्यक रूप से कैनवास की पृष्ठभूमि भी बहुत धीमी है)।
कई और मुश्किल तरीकों से, आप मोबाइल फोन पर कैनवास की पूरी तरह से सामान्य गति प्राप्त कर सकते हैं।

शॉक #

...
कोड को देखते हुए, इसका मतलब है कि प्रत्येक फ्रेम के लिए ग्राफिक प्रिमिटिव्स को ड्रॉ करने के बजाय, उन्हें बफर में एक बार खींचना बेहतर है, और फिर बफर से ड्रा करें, और गणितीय के अनुसार, आरएआरसी या कर्व में किए गए गणितीय गणनाओं के अनुसार एक सर्कल आकर्षित करना सही है। bezierCurveTo में की गई गणना केवल उचित आकार की तस्वीर की नकल करने की तुलना में बहुत धीमी है।

लेकिन असली "डबल बफरिंग" बहुत मायने नहीं रखता है - ब्राउज़र का अपना बैक बफर है, और बैक बफर को मुख्य लेयर में ड्रॉ करना है:
1. बहुत समय लगता है
2. इससे अड़चनों का सामना करना मुश्किल हो जाता है
...

HTML5 कैनवास प्रदर्शन में सुधार