Canvas: यह क्या है, रेंडरिंग विधियाँ और यह कैसे काम करता है

Canvas क्या है?

Canvas स्क्रीन पर एक आयताकार क्षेत्र है जहाँ प्रोग्राम ड्रॉइंग कॉन्टेक्स्ट का उपयोग करके पिक्सेल-दर-पिक्सेल रेंडरिंग करता है। यह अवधारणा 2004 में WHATWG विनिर्देश के भाग के रूप में HTML5 वेब मानकों में उत्पन्न हुई और तब से सभी प्लेटफ़ॉर्म पर ग्राफिक्स की नींव बन गई।

Canvas और डिक्लेरेटिव दृष्टिकोणों (SVG, UI घटकों) के बीच मुख्य अंतर यह है कि Canvas दृश्य को संग्रहीत नहीं करता है। रेंडरिंग के बाद, पिक्सेल स्थिर हो जाते हैं, और छवि को बदलने के लिए प्रोग्राम को आवश्यक क्षेत्र को मिटाकर पुनः चित्रित करना होता है। यह एनिमेशन में अधिकतम प्रदर्शन और दृश्य भंडारण के लिए न्यूनतम मेमोरी खपत प्रदान करता है।

Canvas दो प्रकार के कॉन्टेक्स्ट का समर्थन करता है: 2D फ्लैट ग्राफिक्स के लिए और WebGL / WebGL2 GPU हार्डवेयर एक्सेलेरेशन के माध्यम से त्रि-आयामी रेंडरिंग के लिए। Statista (2025) के अनुसार, Canvas API का उपयोग 89% ब्राउज़र गेम और 67% वेब एडिटर में किया जाता है।

मोबाइल डेवलपमेंट के लिए, Canvas प्रत्येक प्लेटफ़ॉर्म पर अनुकूलित किया गया है: Android में Canvas क्लास के माध्यम से, iOS में Core Graphics और Metal के माध्यम से, .NET MAUI में Microsoft.Maui.Graphics के माध्यम से। एकल सिद्धांत — ड्रॉइंग कॉन्टेक्स्ट, कोऑर्डिनेट सिस्टम और ट्रांसफ़ॉर्मेशन स्टैक — प्लेटफ़ॉर्म की परवाह किए बिना अपरिवर्तित रहता है।

Canvas के तत्व

कैनवास पिक्सेल में निर्दिष्ट एक निश्चित आकार का बिटमैप मैट्रिक्स है। प्रत्येक पिक्सेल RGBA मान संग्रहीत करता है — लाल, हरा, नीला चैनल और अल्फा पारदर्शिता। Canvas कोऑर्डिनेट सिस्टम ऊपरी बाएँ कोने से शुरू होता है, जहाँ X अक्ष दाईं ओर जाता है और Y अक्ष नीचे की ओर जाता है।

कैनवास का आकार दो मापदंडों द्वारा निर्धारित किया जाता है: पिक्सेल में चौड़ाई और ऊँचाई। कैनवास की width और height विशेषताओं को CSS आयामों से अलग करना महत्वपूर्ण है — CSS दृश्य क्षेत्र को स्केल कर सकता है, लेकिन आंतरिक रिज़ॉल्यूशन विशेषताओं द्वारा निर्धारित रहता है। इन मापदंडों का बेमेल होने से छवि धुंधली हो जाती है।

Android में, Canvas का आकार आमतौर पर View या Bitmap के आकार से मेल खाता है जिस पर इसे बनाया गया है। onDraw() कॉल करने पर, एक Canvas पास किया जाता है जो पहले से ही व्यू आकार के लिए कॉन्फ़िगर किया गया है — डेवलपर को मैन्युअल रूप से आयाम सेट करने की आवश्यकता नहीं है।

Canvas कैसे काम करता है?

Canvas ड्रॉइंग कॉन्टेक्स्ट के माध्यम से संचालित होता है — एक ऑब्जेक्ट जो वर्तमान स्थिति संग्रहीत करता है: भरण रंग, रेखा की मोटाई, ट्रांसफ़ॉर्मेशन और पथ। ड्रॉइंग विधियों के सभी कॉल इस स्थिति पर लागू होते हैं और कैनवास की बिटमैप मैट्रिक्स को संशोधित करते हैं।

रेंडरिंग प्रक्रिया एक पाइपलाइन का अनुसरण करती है: क्षेत्र साफ़ करें → स्थिति कॉन्फ़िगर करें → पथ बनाएँ → स्ट्रोक या भरें। एनिमेशन के दौरान, यह चक्र प्रति सेकंड 60 बार दोहराया जाता है, जिसके लिए सहजता बनाए रखने के लिए प्रत्येक चरण के अनुकूलन की आवश्यकता होती है।

Canvas इमीडिएट मोड रेंडरिंग का उपयोग करता है, जहाँ प्रत्येक ड्रॉइंग कमांड तुरंत निष्पादित होता है। रिटेन्ड मोड (SVG या DOM) के विपरीत, Canvas ऑब्जेक्ट की सूची संग्रहीत नहीं करता है। यह मेमोरी खपत को कम करता है लेकिन इंटरैक्टिविटी को जटिल बनाता है — डेवलपर को स्वयं हिट-टेस्टिंग और पुनर्चित्रण लागू करना होता है।

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
ctx.font = '16px sans-serif';
ctx.fillText('Hello Canvas', 10, 80);

उपरोक्त उदाहरण में, हम 2D कॉन्टेक्स्ट प्राप्त करते हैं, भरण रंग सेट करते हैं, एक आयत बनाते हैं, फिर फ़ॉन्ट सेट करते हैं और टेक्स्ट आउटपुट करते हैं। सभी ऑपरेशन कैनवास पर तत्व के width और height विशेषताओं में निर्दिष्ट आकार पर किए जाते हैं।

Canvas स्थिति स्टैक ड्रॉइंग पैरामीटर को सहेजने और पुनर्स्थापित करने की अनुमति देता है। save() विधि वर्तमान स्थिति को स्टैक में रखती है, restore() पिछली स्थिति को पुनर्स्थापित करती है। यह कैस्केडिंग ट्रांसफ़ॉर्मेशन के लिए सुविधाजनक है जब शेष तत्वों को प्रभावित किए बिना तत्वों के समूह पर शिफ्ट या रोटेशन लागू करने की आवश्यकता होती है।

Canvas API की मुख्य विधियाँ

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

प्रिमिटिव बनाना

आयत Canvas के सबसे तेज़ प्रिमिटिव हैं। fillRect(x, y, w, h) विधि भरा हुआ आयत बनाती है, strokeRect() केवल सीमा बनाती है, clearRect() क्षेत्र साफ़ करती है। जटिल बहुभुजों के लिए Path2D ऑब्जेक्ट का उपयोग किया जाता है, जिसे फ्रेम के बीच पुनः उपयोग किया जा सकता है।

इमेज के साथ काम करना

drawImage() Canvas पर बिटमैप इमेज रेंडर करने की मुख्य विधि है। विधि पैरामीटर के तीन सेट स्वीकार करती है: सरल कॉपी, स्केलिंग, और स्केलिंग के साथ क्रॉपिंग। इमेज को HTMLImageElement, SVGImageElement या किसी अन्य Canvas से लोड किया जा सकता है।

मोबाइल डेवलपमेंट के लिए, यह महत्वपूर्ण है कि drawImage() Android में Bitmap और iOS में UIImage के साथ काम करता है। प्लेटफ़ॉर्म कार्यान्वयन हार्डवेयर एक्सेलेरेशन का उपयोग करते हैं जब इमेज और Canvas एक ही GPU टेक्सचर मेमोरी में होते हैं। यदि इमेज कलर प्रोफ़ाइल से मेल नहीं खाती है, तो रूपांतरण के कारण प्रदर्शन हानि हो सकती है।

Canvas पर एनिमेशन

requestAnimationFrame() Canvas एनिमेशन के लिए मानक तंत्र है। setInterval के विपरीत, यह विधि रेंडरिंग को स्क्रीन रिफ़्रेश दर (आमतौर पर 60 FPS) के साथ सिंक्रोनाइज़ करती है। जब टैब बैकग्राउंड में होता है, तो ब्राउज़र कॉल रोक देता है, जिससे बैटरी बचती है।

Canvas एनिमेशन को अनुकूलित करने के लिए, पुनर्चित्रण क्षेत्र को कम करें: पूरे कैनवास को साफ़ करने के बजाय, केवल बदले गए क्षेत्र पर clearRect() का उपयोग करें। तत्वों को एक परत में समूहित करना और स्थिर भागों को ऑफ़स्क्रीन Canvas में कैश करना रेंडरिंग पाइपलाइन पर लोड कम करता है।

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(x, 60, 25, 0, Math.PI * 2);
    ctx.fill();
    x += 2;
    requestAnimationFrame.bind(animate);
}

एनिमेशन लूप कैनवास को साफ़ करता है, ऑब्जेक्ट की स्थिति अपडेट करता है, और इसे पुनः चित्रित करता है। requestAnimationFrame सहजता और टैब छिपाए जाने पर स्वचालित विराम सुनिश्चित करता है, जिससे डिवाइस संसाधन बचते हैं।

मोबाइल डेवलपमेंट में Canvas

Canvas मोबाइल प्लेटफ़ॉर्म पर अलग-अलग तरीके से कार्यान्वित किया जाता है लेकिन प्रोग्रामेटिक कैनवास के सामान्य विचार पर आधारित है। Android में, Canvas क्लास ग्राफिक्स सिस्टम का हिस्सा है, जो किसी भी View के onDraw(Canvas) विधि में पास किया जाता है। iOS में, समतुल्य CGContext कॉन्टेक्स्ट के साथ Core Graphics है।

Android में Canvas

Android Canvas Bitmap या SurfaceView के साथ मिलकर काम करता है। Bitmap के माध्यम से Canvas बनाते समय, रेंडरिंग मेमोरी में की जाती है, जबकि SurfaceView के माध्यम से — हार्डवेयर एक्सेलेरेशन के साथ सीधे स्क्रीन पर। API 14+ से, Canvas HWUI का उपयोग करता है — एक हार्डवेयर एक्सेलेरेटर जो ड्रॉइंग कमांड को OpenGL या Vulkan में अनुवादित करता है।

Android Canvas की मुख्य विधियों में drawBitmap(), drawCircle(), drawLine() और drawPath() शामिल हैं। सभी विधियाँ Paint स्वीकार करती हैं — एक ऑब्जेक्ट जो शैली को नियंत्रित करता है: रंग, मोटाई, एंटी-अलियासिंग प्रभाव। Google I/O (2024) के अनुसार, HWUI पर Canvas सॉफ़्टवेयर रेंडरिंग की तुलना में 40% तक प्रदर्शन लाभ दिखाता है।

class CustomView(context: Context) : View(context) {
    private val paint = Paint().apply {
        color = Color.RED
        isAntiAlias = true
        strokeWidth = 4f
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawCircle(100f, 100f, 50f, paint)
        canvas.drawText("Canvas Android", 100f, 200f, paint)
    }
}

Android में, Canvas API 14+ पर डिफ़ॉल्ट रूप से हार्डवेयर एक्सेलेरेशन का उपयोग करता है। जटिल ग्राफिक्स के लिए, SurfaceView या TextureView की सिफारिश की जाती है, जो बैकग्राउंड थ्रेड में रेंडरिंग के लिए एक अलग परत आवंटित करते हैं। यह गहन एनिमेशन के दौरान UI थ्रेड को ब्लॉक होने से रोकता है।

iOS में Canvas

Core Graphics रास्टर और वेक्टर ग्राफिक्स के लिए Apple का फ्रेमवर्क है, जो Canvas के समतुल्य है। CGContext कॉन्टेक्स्ट लाइनों, वक्रों, ग्रेडिएंट और छायाओं को बनाने की विधियाँ प्रदान करता है। SwiftUI में, Canvas iOS 15 में जोड़ी गई Canvas संरचना के माध्यम से उपलब्ध है।

SwiftUI Canvas Core Graphics के ऊपर एक type-safe रैपर GraphicsContext का उपयोग करता है। डेवलपर GraphicsContext के साथ काम करता है, जो ट्रांसफ़ॉर्मेशन, परतों और प्रतीकों का समर्थन करता है। UIKit के विपरीत, SwiftUI Canvas स्वचालित रूप से Retina डिस्प्ले और डायनामिक टाइप को संभालता है।

struct MyCanvasView: View {
    var body: some View {
        Canvas { context, size in
            context.fill(
                Path(ellipseIn: CGRect(x: 0, y: 0, width: 100, height: 100)),
                with: .color(.red)
            )
            context.draw(
                Text("Canvas iOS"),
                at: CGPoint(x: 50, y: 150)
            )
        }
        .frame(width: 300, height: 300)
    }
}

SwiftUI Canvas डिक्लेरेटिव सिंटैक्स और स्वचालित रेंडरिंग ऑप्टिमाइज़ेशन की विशेषता है। फ्रेमवर्क स्वयं निर्धारित करता है कि स्थिति बदलने पर कैनवास के किन हिस्सों को पुनः चित्रित करने की आवश्यकता है। GraphicsContext drawLayer विधि के माध्यम से परतों का समर्थन करता है, जो बहु-परत ग्राफिक्स के निर्माण को सरल बनाता है।

Canvas का प्रदर्शन

Canvas का प्रदर्शन तीन कारकों पर निर्भर करता है: पुनर्चित्रण क्षेत्र, ड्रॉइंग कॉल की संख्या और संचालन की जटिलता। प्रत्येक ड्रॉइंग विधि कॉल एक कमांड है जो पाइपलाइन से गुज़रती है: CPU कमांड बनाता है, GPU रास्टराइज़ेशन करता है।

अनुकूलन का मुख्य नियम है कॉल की संख्या को कम करना। 1000 अलग-अलग बिंदु बनाने के बजाय, 1000 सेगमेंट वाले पथ का उपयोग करें — 1000 के बजाय एक stroke() कॉल। दूसरा नियम है स्थैतिक कैशिंग: अपरिवर्तित तत्वों को ऑफ़स्क्रीन Canvas में ले जाएँ और उन्हें drawImage() के माध्यम से कॉपी करें।

प्रोफ़ाइलिंग उपकरण: वेब के लिए Chrome DevTools Performance, Android के लिए GPU Inspector, और iOS के लिए Instruments। Google Chrome Developers (2025) के अनुसार, 70% Canvas प्रदर्शन समस्याएँ अत्यधिक पुनर्चित्रण और परत कैशिंग की कमी के कारण होती हैं।

मोबाइल उपकरणों के लिए, बैटरी बचत महत्वपूर्ण है। अत्यधिक रेंडरिंग GPU को लोड करती है और रनटाइम कम करती है। स्क्रीन रिफ़्रेश दर के साथ सिंक्रोनाइज़ करने के लिए Android में willBePresented() विधि और iOS में displayLink का उपयोग करें।

Canvas की उन्नत सुविधाएँ

आधुनिक Canvas सरल 2D रेंडरिंग से आगे निकल गया है। CanvasContext पर आधारित WebGL हार्डवेयर एक्सेलेरेशन के साथ त्रि-आयामी ग्राफिक्स रेंडर करने की अनुमति देता है। OffscreenCanvas भारी रेंडरिंग को UI थ्रेड को ब्लॉक किए बिना Web Workers में स्थानांतरित करता है।

Canvas के माध्यम से WebGL

WebGL एक Canvas कॉन्टेक्स्ट है जो ब्राउज़र से OpenGL ES तक पहुँच प्रदान करता है। fillRect() के बजाय, डेवलपर GLSL में शेडर लिखता है और बफ़र्स में ज्योमेट्री लोड करता है। Statista (2025) के अनुसार, 92% मोबाइल ब्राउज़र WebGL 2.0 का समर्थन करते हैं, जो Canvas को वेब गेम और 3D विज़ुअलाइज़ेशन की नींव बनाता है।

WebGL के लिए कंटेनर के रूप में Canvas एक ही एप्लिकेशन में 2D और 3D ग्राफिक्स के एकीकरण को सरल बनाता है। उदाहरण के लिए, 3D दृश्य WebGL के माध्यम से रेंडर किया जाता है, जबकि UI ओवरले उसी कैनवास के 2D कॉन्टेक्स्ट के माध्यम से रेंडर किया जाता है। मिश्रित रेंडरिंग के लिए z-क्रम प्रबंधन और फ्रेम दर सिंक्रोनाइज़ेशन की आवश्यकता होती है।

OffscreenCanvas

OffscreenCanvas रेंडरिंग को बैकग्राउंड थ्रेड में स्थानांतरित करने के लिए एक API है। सामान्य Canvas के विपरीत, OffscreenCanvas DOM से बंधा नहीं है और Web Worker में उपयोग किया जा सकता है। यह FPS ड्रॉप के बिना मुख्य थ्रेड के समानांतर जटिल ग्राफिक्स गणना करने की अनुमति देता है।

Worker से मुख्य थ्रेड में पूर्ण फ्रेम स्थानांतरण transferControlToOffscreen() और commit() के माध्यम से होता है। Chrome Platform Status (2025) के अनुसार, OffscreenCanvas 87% ब्राउज़रों में समर्थित है और गहन रेंडरिंग वाले एप्लिकेशन — ग्राफिक एडिटर, चार्ट और एनिमेशन के लिए अनुशंसित है।