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% براؤزرز میں سپورٹ کیا جاتا ہے اور شدید رینڈرنگ والی ایپلیکیشنز — گرافک ایڈیٹرز، چارٹس اور اینیمیشنز کے لیے تجویز کیا جاتا ہے۔