Canvas: এটি কী, রেন্ডারিং পদ্ধতি ও এটি কীভাবে কাজ করে

Canvas কী?

Canvas হল স্ক্রিন上的 একটি আয়তক্ষেত্রাকার এলাকা যেখানে প্রোগ্রাম ড্রয়িং কনটেক্সট ব্যবহার করে পিক্সেল প্রতি পিক্সেল রেন্ডারিং করে। ধারণাটি 2004 সালে WHATWG স্পেসিফিকেশনের অংশ হিসেবে HTML5 ওয়েব স্ট্যান্ডার্ডে উদ্ভূত হয় এবং তখন থেকে সব প্ল্যাটফর্মে গ্রাফিক্সের ভিত্তি হয়ে উঠেছে।

Canvas এবং ডিক্লারেটিভ পদ্ধতির (SVG, UI কম্পোনেন্ট) মধ্যে প্রধান পার্থক্য হল Canvas কোনো দৃশ্য সংরক্ষণ করে না। রেন্ডারিংয়ের পর পিক্সেল স্থির হয়ে যায় এবং ইমেজ পরিবর্তন করতে প্রোগ্রামকে প্রয়োজনীয় এলাকা মুছে পুনরায় আঁকতে হয়। এটি অ্যানিমেশনে সর্বোচ্চ পারফরম্যান্স এবং দৃশ্য সংরক্ষণের জন্য ন্যূনতম মেমরি খরচ প্রদান করে।

Canvas দুই ধরনের কনটেক্সট সমর্থন করে: ফ্ল্যাট গ্রাফিক্সের জন্য 2D এবং GPU হার্ডওয়্যার এক্সিলারেশনের মাধ্যমে ত্রি-মাত্রিক রেন্ডারিংয়ের জন্য WebGL / WebGL2। 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% ব্রাউজারে সমর্থিত এবং তীব্র রেন্ডারিং অ্যাপ্লিকেশন — গ্রাফিক এডিটর, চার্ট ও অ্যানিমেশনের জন্য সুপারিশ করা হয়।