Canvas: apa itu, metode rendering dan cara kerjanya

Apa itu Canvas?

Canvas adalah area persegi panjang di layar tempat program melakukan rendering piksel per piksel menggunakan konteks menggambar. Konsep ini lahir dalam standar web HTML5 sebagai bagian dari spesifikasi WHATWG pada tahun 2004 dan sejak itu menjadi dasar grafis di semua platform.

Perbedaan utama Canvas dari pendekatan deklaratif (SVG, komponen UI) adalah bahwa Canvas tidak menyimpan scene. Setelah rendering, piksel difiksasi, dan untuk mengubah gambar, program harus menghapus dan menggambar ulang area yang diperlukan. Ini memberikan performa maksimal pada animasi dan konsumsi memori minimal untuk penyimpanan scene.

Canvas mendukung dua jenis konteks: 2D untuk grafis datar dan WebGL / WebGL2 untuk rendering tiga dimensi melalui akselerasi hardware GPU. Menurut Statista (2025), Canvas API digunakan dalam 89% game browser dan 67% editor web.

Untuk pengembangan mobile, Canvas diadaptasi di setiap platform: di Android melalui kelas dengan nama yang sama Canvas, di iOS melalui Core Graphics dan Metal, di .NET MAUI melalui Microsoft.Maui.Graphics. Prinsip seragam — konteks menggambar, sistem koordinat, dan stack transformasi — tetap tidak berubah terlepas dari platform.

Elemen Canvas

Kanvas merepresentasikan matriks bit dengan ukuran tetap, ditentukan dalam piksel. Setiap piksel menyimpan nilai RGBA — saluran merah, hijau, biru, dan transparansi alfa. Sistem koordinat Canvas dimulai dari sudut kiri atas, di mana sumbu X ke kanan dan sumbu Y ke bawah.

Ukuran kanvas ditentukan oleh dua parameter: lebar dan tinggi dalam piksel. Penting untuk membedakan atribut width dan height kanvas dari ukuran CSS — CSS dapat menskalakan area yang terlihat, tetapi resolusi internal tetap ditentukan oleh atribut. Ketidakcocokan parameter ini menyebabkan keburaman gambar.

Di Android, ukuran Canvas biasanya sesuai dengan ukuran View atau Bitmap tempat ia dibuat. Pada onDraw(), Canvas yang sudah diatur ke ukuran view akan diteruskan — pengembang tidak perlu mengatur ukuran secara manual.

Bagaimana Canvas bekerja?

Canvas berfungsi melalui konteks menggambar — objek yang menyimpan status saat ini: warna isian, ketebalan garis, transformasi, dan jalur. Semua pemanggilan metode menggambar diterapkan pada status ini dan mengubah matriks bit kanvas.

Proses rendering mengikuti pipeline: pembersihan area → pengaturan status → pembangunan jalur → kontur atau isian. Pada animasi, siklus ini berulang 60 kali per detik, yang memerlukan optimasi setiap langkah untuk menjaga kelancaran.

Canvas menggunakan immediate mode rendering — mode segera, di mana setiap perintah menggambar dieksekusi segera. Berbeda dengan retained mode (SVG atau DOM), Canvas tidak menyimpan daftar objek. Ini mengurangi konsumsi memori tetapi mempersulit interaktivitas — pengembang sendiri mengimplementasikan hit-testing dan penggambaran ulang.

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);

Dalam contoh di atas, kita mendapatkan konteks 2D, mengatur warna isian, menggambar persegi panjang, kemudian mengatur font dan menampilkan teks. Semua operasi dilakukan pada kanvas dengan ukuran yang ditentukan dalam atribut width dan height elemen.

Stack status Canvas memungkinkan menyimpan dan memulihkan parameter menggambar. Metode save() menempatkan status saat ini ke stack, restore() memulihkan status sebelumnya. Ini berguna pada transformasi berjenjang, ketika diperlukan untuk menerapkan pergeseran atau rotasi ke sekelompok elemen tanpa memengaruhi yang lain.

Metode utama Canvas API

Canvas API menyediakan sekitar 40 metode untuk rendering primitif, gambar, teks, dan manajemen gaya. Set dasar mencakup metode untuk bekerja dengan persegi panjang, jalur, busur, dan teks. Mari kita lihat kelompok metode utama.

Menggambar primitif

Persegi panjang — primitif tercepat Canvas. Metode fillRect(x, y, w, h) menggambar persegi panjang terisi, strokeRect() — hanya tepi, clearRect() — membersihkan area. Untuk poligon kompleks, digunakan objek Path2D yang dapat digunakan kembali antar frame.

Bekerja dengan gambar

drawImage() — metode utama untuk rendering gambar raster di Canvas. Metode ini menerima tiga set parameter: penyalinan sederhana, penskalaan, dan pemotongan dengan penskalaan. Gambar dapat dimuat dari HTMLImageElement, SVGImageElement, atau Canvas lain.

Untuk pengembangan mobile, penting bahwa drawImage() bekerja dengan Bitmap di Android dan UIImage di iOS. Implementasi platform menggunakan akselerasi hardware ketika gambar dan Canvas berada di memori tekstur GPU yang sama. Jika gambar tidak cocok dengan profil warna, kemungkinan terjadi penurunan performa karena konversi.

Animasi di Canvas

requestAnimationFrame() — mekanisme standar untuk animasi Canvas. Berbeda dengan setInterval, metode ini menyinkronkan rendering dengan kecepatan refresh layar (biasanya 60 FPS). Saat tab berada di latar belakang, browser menghentikan pemanggilan, menghemat baterai.

Untuk optimasi animasi Canvas, area penggambaran ulang harus diminimalkan: daripada membersihkan seluruh kanvas, gunakan clearRect() hanya pada area yang diubah. Mengelompokkan elemen dalam satu lapisan dan men-cache bagian statis di offscreen Canvas mengurangi beban pada pipeline rendering.

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);
}

Siklus animasi membersihkan kanvas, memperbarui posisi objek, dan menggambarnya ulang. requestAnimationFrame menjamin kelancaran dan jeda otomatis saat tab disembunyikan, yang menghemat sumber daya perangkat.

Canvas dalam pengembangan mobile

Canvas di platform mobile diimplementasikan secara berbeda, tetapi didasarkan pada ide umum kanvas programatik. Di Android, kelas Canvas adalah bagian dari sistem grafis, diteruskan ke metode onDraw(Canvas) dari setiap View. Di iOS, padanannya adalah Core Graphics dengan konteks CGContext.

Canvas di Android

Android Canvas bekerja bersama Bitmap atau SurfaceView. Saat membuat Canvas melalui Bitmap, rendering dilakukan ke memori, dan melalui SurfaceView — langsung ke layar dengan akselerasi hardware. Sejak API 14+, Canvas menggunakan HWUI — akselerator hardware yang menerjemahkan perintah menggambar ke OpenGL atau Vulkan.

Metode kunci Android Canvas meliputi drawBitmap(), drawCircle(), drawLine(), dan drawPath(). Semua metode menerima Paint — objek yang mengelola gaya: warna, ketebalan, efek anti-aliasing. Menurut Google I/O (2024), Canvas pada HWUI menunjukkan peningkatan performa hingga 40% dibandingkan rendering software.

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)
    }
}

Di Android, Canvas secara default menggunakan akselerasi hardware sejak API 14+. Untuk grafis kompleks, direkomendasikan SurfaceView atau TextureView, yang mengalokasikan lapisan terpisah untuk rendering di thread latar belakang. Ini mencegah pemblokiran thread UI saat animasi intensif.

Canvas di iOS

Core Graphics — framework Apple untuk grafis raster dan vektor, padanan Canvas. Konteks CGContext menyediakan metode untuk menggambar garis, kurva, gradien, dan bayangan. Di SwiftUI, Canvas tersedia melalui struktur Canvas, ditambahkan di iOS 15.

SwiftUI Canvas menggunakan GraphicsContext — pembungkus type-safe di atas Core Graphics. Pengembang bekerja dengan GraphicsContext, yang mendukung transformasi, lapisan, dan simbol. Berbeda dengan UIKit, SwiftUI Canvas secara otomatis menangani layar Retina dan tipe dinamis.

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 menonjol dengan sintaks deklaratif dan optimasi rendering otomatis. Framework sendiri menentukan bagian kanvas mana yang perlu digambar ulang saat status berubah. GraphicsContext mendukung lapisan melalui metode drawLayer, yang menyederhanakan pembuatan grafis multi-lapis.

Performa Canvas

Performa Canvas tergantung pada tiga faktor: area penggambaran ulang, jumlah pemanggilan menggambar, dan kompleksitas operasi. Setiap pemanggilan metode menggambar adalah perintah yang melewati pipeline: CPU membentuk perintah, GPU melakukan rasterisasi.

Aturan dasar optimasi — minimasi jumlah pemanggilan. Alih-alih menggambar 1000 titik terpisah, gunakan jalur dengan 1000 segmen — satu pemanggilan stroke() alih-alih 1000. Aturan kedua — caching statis: pindahkan elemen yang tidak berubah ke offscreen Canvas dan salin melalui drawImage().

Alat profiling: Chrome DevTools Performance untuk web, GPU Inspector untuk Android, dan Instruments untuk iOS. Menurut Google Chrome Developers (2025), 70% masalah performa Canvas disebabkan oleh penggambaran ulang berlebihan dan kurangnya caching lapisan.

Untuk perangkat mobile, penghematan baterai sangat penting. Rendering berlebihan membebani GPU dan mengurangi waktu pakai. Gunakan metode willBePresented() di Android dan displayLink di iOS untuk sinkronisasi dengan kecepatan refresh layar.

Fitur lanjutan Canvas

Canvas modern telah melampaui rendering 2D sederhana. WebGL berbasis CanvasContext memungkinkan rendering grafis tiga dimensi dengan akselerasi hardware. OffscreenCanvas memindahkan rendering berat ke Web Workers tanpa memblokir thread UI.

WebGL melalui Canvas

WebGL adalah konteks Canvas yang menyediakan akses ke OpenGL ES dari browser. Alih-alih fillRect(), pengembang menulis shader dalam GLSL dan memuat geometri ke buffer. Menurut Statista (2025), 92% browser mobile mendukung WebGL 2.0, menjadikan Canvas dasar untuk game web dan visualisasi 3D.

Canvas sebagai wadah untuk WebGL menyederhanakan integrasi grafis 2D dan 3D dalam satu aplikasi. Misalnya, scene 3D di-render melalui WebGL, dan overlay UI — melalui konteks 2D dari kanvas yang sama. Rendering campuran memerlukan manajemen urutan Z dan sinkronisasi kecepatan frame.

OffscreenCanvas

OffscreenCanvas — API untuk memindahkan rendering ke thread latar belakang. Berbeda dengan Canvas biasa, OffscreenCanvas tidak terikat ke DOM dan dapat digunakan di Web Worker. Ini memungkinkan melakukan perhitungan grafis kompleks secara paralel dengan thread utama tanpa penurunan FPS.

Transfer frame siap dari Worker ke thread utama terjadi melalui transferControlToOffscreen() dan commit(). Menurut Chrome Platform Status (2025), OffscreenCanvas didukung di 87% browser dan direkomendasikan untuk aplikasi dengan rendering intensif — editor grafis, diagram, dan animasi.