Canvas: چیست، روش‌های ترسیم و چگونه کار می‌کند

Canvas چیست؟

Canvas یک ناحیه مستطیلی روی صفحه است که در آن برنامه با استفاده از زمینه ترسیم، ترسیم پیکسل به پیکسل انجام می‌دهد. این مفهوم در استانداردهای وب HTML5 به عنوان بخشی از مشخصات WHATWG در سال 2004 شکل گرفت و از آن زمان به پایه گرافیک در تمام پلتفرم‌ها تبدیل شد.

تفاوت اصلی 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 که از قبل برای اندازه‌های view تنظیم شده است ارسال می‌شود — توسعه‌دهنده نیازی به تنظیم دستی اندازه‌ها ندارد.

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() با Bitmap در Android و UIImage در iOS کار می‌کند. پیاده‌سازی‌های پلتفرمی زمانی از شتاب سخت‌افزاری استفاده می‌کنند که تصویر و Canvas در یک حافظه بافت GPU باشند. اگر تصویر از نظر پروفایل رنگی مطابقت نداشته باشد، امکان افت عملکرد به دلیل تبدیل وجود دارد.

انیمیشن روی Canvas

requestAnimationFrame() — مکانیزم استاندارد برای انیمیشن Canvas. برخلاف setInterval، این روش ترسیم را با نرخ تازه‌سازی صفحه همگام می‌کند (معمولاً 60 FPS). وقتی برگه در پس‌زمینه است، مرورگر فراخوانی‌ها را متوقف می‌کند و در مصرف باتری صرفه‌جویی می‌کند.

برای بهینه‌سازی انیمیشن Canvas باید ناحیه بازترسیم را به حداقل رساند: به جای پاک کردن کل بوم، از clearRect() فقط در ناحیه تغییر یافته استفاده کنید. گروه‌بندی عناصر در یک لایه و کش کردن بخش‌های ثابت در offscreen 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 بخشی از سیستم گرافیکی است که به متد onDraw(Canvas) هر View ارسال می‌شود. در iOS معادل آن Core Graphics با زمینه CGContext است.

Canvas در Android

Android Canvas در ترکیب با Bitmap یا SurfaceView کار می‌کند. هنگام ایجاد Canvas از طریق Bitmap، ترسیم در حافظه انجام می‌شود، و از طریق SurfaceView — مستقیماً روی صفحه با شتاب سخت‌افزاری. از API 14+ Canvas از HWUI استفاده می‌کند — شتاب‌دهنده سخت‌افزاری که دستورات ترسیم را به OpenGL یا Vulkan ترجمه می‌کند.

روش‌های کلیدی Android Canvas شامل drawBitmap()، drawCircle()، drawLine() و drawPath() می‌شود. همه روش‌ها Paint را می‌پذیرند — شیئی که سبک را مدیریت می‌کند: رنگ، ضخامت، اثرات صاف‌سازی. طبق Google I/O (2024)، Canvas روی HWUI افزایش عملکرد تا 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 در انیمیشن شدید جلوگیری می‌کند.

Canvas در iOS

Core Graphics — چارچوب اپل برای گرافیک شطرنجی و برداری، معادل Canvas. زمینه CGContext روش‌هایی برای ترسیم خطوط، منحنی‌ها، گرادیان‌ها و سایه‌ها فراهم می‌کند. در SwiftUI Canvas از طریق ساختار Canvas که در iOS 15 اضافه شده است در دسترس است.

SwiftUI Canvas از GraphicsContext استفاده می‌کند — یک پوشش نوع‌امن بر Core Graphics. توسعه‌دهنده با 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 بخش استفاده کنید — یک فراخوانی stroke() به جای 1000. قانون دوم — کش کردن ایستا: عناصر غیرقابل تغییر را به offscreen Canvas منتقل کنید و از طریق drawImage() کپی کنید.

ابزارهای پروفایل: Chrome DevTools Performance برای وب، GPU Inspector برای Android و Instruments برای iOS. طبق Google Chrome Developers (2025)، 70٪ مشکلات عملکرد Canvas ناشی از بازترسیم بیش از حد و عدم کش کردن لایه‌ها است.

برای دستگاه‌های موبایل صرفه‌جویی در باتری حیاتی است. ترسیم بیش از حد GPU را بارگیری می‌کند و زمان کار را کاهش می‌دهد. از روش willBePresented() در Android و displayLink در iOS برای همگام‌سازی با نرخ تازه‌سازی صفحه استفاده کنید.

قابلیت‌های پیشرفته Canvas

Canvas مدرن فراتر از ترسیم ساده 2D رفته است. WebGL مبتنی بر CanvasContext امکان رندر گرافیک سه بعدی با شتاب سخت‌افزاری را فراهم می‌کند. OffscreenCanvas ترسیم سنگین را به Web Workers منتقل می‌کند بدون اینکه رشته UI را مسدود کند.

WebGL از طریق Canvas

WebGL یک زمینه Canvas است که دسترسی به OpenGL ES را از مرورگر فراهم می‌کند. به جای fillRect() توسعه‌دهنده شیدرها را در GLSL می‌نویسد و هندسه را در بافرها بارگذاری می‌کند. طبق Statista (2025)، 92٪ از مرورگرهای موبایل از WebGL 2.0 پشتیبانی می‌کنند که Canvas را به پایه بازی‌های وب و تجسم‌های 3D تبدیل می‌کند.

Canvas به عنوان ظرفی برای WebGL یکپارچه‌سازی گرافیک 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٪ مرورگرها پشتیبانی می‌شود و برای برنامه‌های با ترسیم فشرده — ویرایشگرهای گرافیکی، نمودارها و انیمیشن‌ها — توصیه می‌شود.