Canvas Animasyonları Sayfayı Donduruyor? OffscreenCanvas Çözüm

Profiler'ı açıyorsun, kaydı başlatıyorsun ve grafik harika görünüyor: saniye başına 60 kare, sabit, hiç frame kaybı yok. Yayına alıyorsun. Sonra animasyon çalışırken birisi bir butona tıklıyor ve yarım saniye boyunca hiçbir şey olmuyor. Frame kaybı değil, bütün sayfa donuyor. Tıklama sıraya giriyor, ana thread'in piksel çizmesi bitene kadar bekliyor.

Sorun şu: canvas animasyonun kendisiyle değil, sayfadaki her şeyle rekabet halinde. Tıklama işleyicileri, layout hesaplamaları, input yönetimi, hepsi tek bir thread'de çalışıyor ve canvas çizim çağrıları o thread'in birinci sınıf vatandaşları. Frame rate grafiğinde görünmez ama kullanıcı hissediyor.

İlk çare genellikle yanlış yer. Binlerce parçacık, canlı grafik güncellemesi, çarpışma kontrolü yapan oyun loop'u, hepsi hesaplama sorunu gibi görünüyor, bu yüzden herkes Web Worker'a hesaplamayı taşımayı dener. Ama gerçek sorun şu: canvas çizim işlemleri hala ana thread'de yapılıyor.

OffscreenCanvas tam burada devreye giriyor. Bu API sayesinde canvas'ı ana thread'den tamamen ayırabiliyor ve bir worker thread'de çizim yapabiliyorsun. Tıklamalar, layout'lar, input işlemleri ana thread'de akıcı kalıyor; animasyon işleri arka planda sessizce ilerliyor.

Kullanımı basit: worker thread'de OffscreenCanvas oluştur, canvas'ı transferable object olarak gönder, worker'da çizim yap. Ana thread'in canvas'ı görüntülemesi yeterli, çizim işleri seni ilgilendirmiyor. Sonuç? Animasyon sırasında da sayfanın responsivliği bozulmuyor, tıklamalar hemen işleniyor.

OffscreenCanvas desteği modern tarayıcılarda yaygın (Chrome, Firefox, Safari). Eski tarayıcılar için fallback hazırlamak iyi fikir, ama yeni projeler için bu standart artık olması gereken yer. Canvas-ağır uygulamalarında (oyunlar, veri görselleştirme, gerçek zamanlı animasyonlar) bu fark çarpıcı oluyor.