Canvas: nedir, çizim yöntemleri ve nasıl çalışır

Canvas Nedir?

Canvas, bir programın çizim bağlamı kullanarak piksel piksel çizim yaptığı ekrandaki dikdörtgen bir alandır. Kavram, 2004 yılında WHATWG spesifikasyonunun bir parçası olarak HTML5 web standartlarında ortaya çıkmış ve o zamandan beri tüm platformlarda grafiklerin temeli haline gelmiştir.

Canvas ile bildirimsel yaklaşımlar (SVG, UI bileşenleri) arasındaki temel fark, Canvas'ın bir sahneyi saklamamasıdır. Çizimden sonra pikseller sabitlenir ve görüntüyü değiştirmek için programın gerekli alanı silip yeniden çizmesi gerekir. Bu, animasyonda maksimum performans ve sahne depolama için minimum bellek tüketimi sağlar.

Canvas iki tür bağlamı destekler: düz grafikler için 2D ve GPU donanım hızlandırmasıyla üç boyutlu çizim için WebGL / WebGL2. Statista'ya (2025) göre Canvas API, tarayıcı oyunlarının %89'unda ve web düzenleyicilerinin %67'sinde kullanılmaktadır.

Mobil geliştirme için Canvas her platformda uyarlanmıştır: Android'te Canvas sınıfı aracılığıyla, iOS'te Core Graphics ve Metal aracılığıyla, .NET MAUI'de Microsoft.Maui.Graphics aracılığıyla. Tek prensip — çizim bağlamı, koordinat sistemi ve dönüşüm yığını — platformdan bağımsız olarak değişmeden kalır.

Canvas Öğeleri

Tuval, piksel cinsinden belirtilen sabit boyutlu bir bitmap matrisidir. Her piksel bir RGBA değeri (kırmızı, yeşil, mavi kanalları ve alfa şeffaflığı) depolar. Canvas koordinat sistemi, X ekseninin sağa ve Y ekseninin aşağı gittiği sol üst köşeden başlar.

Tuvalin boyutu iki parametreyle belirlenir: piksel cinsinden genişlik ve yükseklik. Tuvalin width ve height niteliklerini CSS boyutlarından ayırt etmek önemlidir — CSS görünür alanı ölçekleyebilir, ancak iç çözünürlük nitelikler tarafından belirlenmiş olarak kalır. Bu parametrelerin uyuşmazlığı görüntünün bulanıklaşmasına yol açar.

Android'te, Canvas boyutu genellikle üzerinde oluşturulduğu View veya Bitmap'in boyutuyla eşleşir. onDraw() çağrıldığında, zaten görünüm boyutuna göre yapılandırılmış bir Canvas iletilir — geliştiricinin boyutları manuel olarak ayarlaması gerekmez.

Canvas Nasıl Çalışır?

Canvas, mevcut durumu (dolgu rengi, çizgi kalınlığı, dönüşümler ve yol) depolayan bir nesne olan çizim bağlamı aracılığıyla çalışır. Tüm çizim yöntemi çağrıları bu duruma uygulanır ve tuvalin bitmap matrisini değiştirir.

Çizim süreci bir işlem hattını izler: alanı temizle → durumu yapılandır → yolu oluştur → kontur veya dolgu. Animasyon sırasında bu döngü saniyede 60 kez tekrarlanır ve akıcılığı korumak için her adımın optimizasyonu gerekir.

Canvas, her çizim komutunun hemen yürütüldüğü anında mod çizimini kullanır. Saklı modun (SVG veya DOM) aksine, Canvas bir nesne listesi depolamaz. Bu, bellek tüketimini azaltır ancak etkileşimi karmaşıklaştırır — geliştiricinin isabet testini ve yeniden çizmeyi kendisi uygulaması gerekir.

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

Yukarıdaki örnekte, 2D bağlamı alıyoruz, dolgu rengini ayarlıyoruz, bir dikdörtgen çiziyoruz, ardından yazı tipini ayarlayıp metin çıktısı alıyoruz. Tüm işlemler, öğenin width ve height niteliklerinde belirtilen boyuttaki bir tuvalde gerçekleştirilir.

Canvas durum yığını, çizim parametrelerini kaydetmeye ve geri yüklemeye olanak tanır. save() yöntemi mevcut durumu yığına iter, restore() önceki durumu geri yükler. Bu, diğer öğeleri etkilemeden bir öğe grubuna kaydırma veya döndürme uygulanması gereken basamaklı dönüşümler için kullanışlıdır.

Canvas API'nin Temel Yöntemleri

Canvas API, ilkeller, görüntüler, metin ve stil yönetimi için yaklaşık 40 yöntem sağlar. Temel set, dikdörtgenler, yollar, yaylar ve metinle çalışmak için yöntemler içerir. Ana yöntem gruplarını inceleyelim.

İlkelleri Çizme

Dikdörtgenler Canvas'ın en hızlı ilkelleridir. fillRect(x, y, w, h) yöntemi dolu bir dikdörtgen çizer, strokeRect() yalnızca kenarlığı çizer, clearRect() alanı temizler. Karmaşık çokgenler için Path2D nesnesi kullanılır ve kareler arasında yeniden kullanılabilir.

Görüntülerle Çalışma

drawImage(), Canvas üzerinde bitmap görüntüleri çizmek için ana yöntemdir. Yöntem üç parametre seti kabul eder: basit kopyalama, ölçekleme ve ölçeklemeyle kırpma. Görüntü HTMLImageElement, SVGImageElement veya başka bir Canvas'tan yüklenebilir.

Mobil geliştirme için drawImage()'ın Android'te Bitmap ve iOS'te UIImage ile çalışması kritiktir. Platform uygulamaları, görüntü ve Canvas aynı GPU doku belleğinde olduğunda donanım hızlandırmasını kullanır. Görüntü renk profiliyle eşleşmezse, dönüştürme nedeniyle performans kaybı oluşabilir.

Canvas'te Animasyon

requestAnimationFrame(), Canvas animasyonu için standart mekanizmadır. setInterval'ın aksine, bu yöntem çizimi ekran yenileme hızıyla (genellikle 60 FPS) senkronize eder. Sekme arka plandayken tarayıcı çağrıları durdurarak pil tasarrufu sağlar.

Canvas animasyonunu optimize etmek için yeniden çizim alanını en aza indirin: tüm tuvali temizlemek yerine, yalnızca değiştirilen bölgede clearRect() kullanın. Öğeleri tek bir katmanda gruplamak ve statik parçaları ekran dışı Canvas'ta önbelleğe almak, çizim işlem hattındaki yükü azaltır.

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

Animasyon döngüsü tuvali temizler, nesne konumunu günceller ve yeniden çizer. requestAnimationFrame akıcılık ve sekme gizlendiğinde otomatik duraklama sağlayarak cihaz kaynaklarından tasarruf eder.

Mobil Geliştirmede Canvas

Canvas mobil platformlarda farklı şekilde uygulanır ancak programatik tuval ortak fikrine dayanır. Android'te Canvas sınıfı, herhangi bir View'in onDraw(Canvas) yöntemine iletilen grafik sisteminin bir parçasıdır. iOS'te eşdeğeri, CGContext bağlamıyla Core Graphics'tır.

Android'te Canvas

Android Canvas, Bitmap veya SurfaceView ile birlikte çalışır. Bitmap aracılığıyla Canvas oluştururken çizim bellekte yapılır, SurfaceView aracılığıyla ise donanım hızlandırmasıyla doğrudan ekrana yapılır. API 14+'ten itibaren Canvas, çizim komutlarını OpenGL veya Vulkan'a çeviren bir donanım hızlandırıcı olan HWUI'yu kullanır.

Android Canvas'ın temel yöntemleri arasında drawBitmap(), drawCircle(), drawLine() ve drawPath() bulunur. Tüm yöntemler, stili (renk, kalınlık, kenar yumuşatma efektleri) kontrol eden bir Paint nesnesi kabul eder. Google I/O'ya (2024) göre, HWUI üzerinde Canvas, yazılım çizimine kıyasla %40'a varan performans artışı gösterir.

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'te Canvas, API 14+'ten itibaren varsayılan olarak donanım hızlandırmasını kullanır. Karmaşık grafikler için, arka plan iş parçacığında çizim için ayrı bir katman ayıran SurfaceView veya TextureView önerilir. Bu, yoğun animasyon sırasında UI iş parçacığının bloke edilmesini önler.

iOS'te Canvas

Core Graphics, raster ve vektör grafikleri için Apple'ın Canvas'a eşdeğer framework'üdür. CGContext bağlamı, çizgiler, eğriler, gradyanlar ve gölgeler çizmek için yöntemler sağlar. SwiftUI'de Canvas, iOS 15'te eklenen Canvas yapısı aracılığıyla kullanılabilir.

SwiftUI Canvas, Core Graphics üzerinde tür güvenli bir sarmalayıcı olan GraphicsContext'i kullanır. Geliştirici, dönüşümleri, katmanları ve sembolleri destekleyen GraphicsContext ile çalışır. UIKit'in aksine, SwiftUI Canvas Retina ekranları ve dinamik türleri otomatik olarak işler.

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, bildirimsel sözdizimi ve otomatik çizim optimizasyonu ile karakterize edilir. Framework, durum değiştiğinde tuvalin hangi bölümlerinin yeniden çizilmesi gerektiğini kendisi belirler. GraphicsContext, drawLayer yöntemi aracılığıyla katmanları destekleyerek çok katmanlı grafik oluşturmayı basitleştirir.

Canvas Performansı

Canvas performansı üç faktöre bağlıdır: yeniden çizim alanı, çizim çağrılarının sayısı ve işlemlerin karmaşıklığı. Her çizim yöntemi çağrısı, bir işlem hattından geçen bir komuttur: CPU komutu oluşturur, GPU rasterleştirmeyi gerçekleştirir.

Optimizasyonun ana kuralı çağrı sayısını en aza indirmektir. 1000 ayrı nokta çizmek yerine, 1000 segmentli bir yol kullanın — 1000 yerine tek bir stroke() çağrısı. İkinci kural statik önbelleğe almadır: değişmeyen öğeleri ekran dışı Canvas'a taşıyın ve drawImage() aracılığıyla kopyalayın.

Profil oluşturma araçları: web için Chrome DevTools Performance, Android için GPU Inspector ve iOS için Instruments. Google Chrome Developers'a (2025) göre, Canvas performans sorunlarının %70'i aşırı yeniden çizim ve katman önbelleğe alma eksikliğinden kaynaklanır.

Mobil cihazlar için pil tasarrufu kritiktir. Aşırı çizim GPU'yu yükler ve çalışma süresini azaltır. Ekran yenileme hızıyla senkronize olmak için Android'te willBePresented() yöntemini ve iOS'te displayLink'i kullanın.

Canvas'ın Gelişmiş Özellikleri

Modern Canvas, basit 2D çizimin ötesine geçmiştir. CanvasContext tabanlı WebGL, donanım hızlandırmasıyla üç boyutlu grafiklerin çizilmesine olanak tanır. OffscreenCanvas, ağır çizimi UI iş parçacığını bloke etmeden Web Workers'a taşır.

Canvas Aracılığıyla WebGL

WebGL, tarayıcıdan OpenGL ES'ye erişim sağlayan bir Canvas bağlamıdır. fillRect() yerine geliştirici GLSL'de gölgelendiriciler yazar ve geometriyi arabelleklere yükler. Statista'ya (2025) göre, mobil tarayıcıların %92'si WebGL 2.0'ı destekleyerek Canvas'ı web oyunları ve 3D görselleştirmelerin temeli haline getirir.

WebGL için kapsayıcı olarak Canvas, tek bir uygulamada 2D ve 3D grafiklerin entegrasyonunu basitleştirir. Örneğin, 3D sahne WebGL aracılığıyla çizilirken UI katmanı aynı tuvalin 2D bağlamı aracılığıyla çizilir. Karma çizim, z-sırası yönetimi ve kare hızı senkronizasyonu gerektirir.

OffscreenCanvas

OffscreenCanvas, çizimi arka plan iş parçacığına taşımak için bir API'dir. Normal Canvas'ın aksine, OffscreenCanvas DOM'a bağlı değildir ve bir Web Worker içinde kullanılabilir. Bu, FPS düşüşü olmadan ana iş parçacığına paralel olarak karmaşık grafik hesaplamaları yapılmasına olanak tanır.

Bir Worker'dan ana iş parçacığına tam kare aktarımı transferControlToOffscreen() ve commit() aracılığıyla gerçekleşir. Chrome Platform Status'a (2025) göre OffscreenCanvas, tarayıcıların %87'sinde desteklenmektedir ve yoğun çizim gerektiren uygulamalar — grafik düzenleyiciler, çizelgeler ve animasyonlar için önerilir.