- HTML-in-Canvas, webde
<canvas> elemanının içinde HTML öğesi/içeriğini doğrudan çizebilen yeni bir standart API öneren bir WICG projesidir
- Karmaşık metin yerleşimi, erişilebilirlik, uluslararasılaştırma ve kalite/perfomans sorunlarını çözmek için ortaya çıktı ve grafik, UI, oyun menüsü gibi farklı Canvas kullanım senaryolarında HTML stilini doğrudan kullanmayı mümkün kılıyor
drawElement, texElement2D, setHitTestRegions gibi yeni yöntemler sayesinde HTML öğeleri doğrudan Canvas 2D veya WebGL bağlamında render edilip dokuya dönüştürülebiliyor- Etkileşim bölgesi, erişilebilirlik geliştirmeleri, 3B sahne içindeki 2B UI, CSS/HTML tabanlı düzenler gibi pratik web uygulaması ihtiyaçları yansıtılıyor
- Şu anda Chrome Canary (138.0.7175.0 ve üstü) üzerinde deneysel bir bayrakla etkinleştirilebilir ve ana geri bildirim/hata raporları bekleniyor
Genel Bakış ve Önemi
- HTML öğelerinin doğrudan
<canvas> içine çizilebildiği yeni bir API öneriliyor
- Önceden karmaşık düzen, metin ve HTML tabanlı içerikleri
<canvas> içinde kolayca render etmenin bir yolu olmadığından erişilebilirlik, uluslararasılaştırma, performans ve kalite açısından sınırlamalar vardı
- HTML-in-Canvas, bu eksikliklere karşı bir tamamlayıcı olarak 2B canvas ve WebGL içinde HTML render etme desteği sunarak grafik çizelgesi araçları, zengin metin kutuları, oyun arayüzleri gibi geniş alanlarda uygulanabilirliği artırıyor.
Kullanım Örnekleri
- Stilleştirilmiş metin ve düzen içeriğinin canvas içinde gösterimi
- Örn: Grafiklerin lejantları, eksenleri, zengin metin düzenleyici kutuları, oyun içi menüler vb.
- Erişilebilirlik geliştirmesi
- Mevcut canvaslarda yedek içerikle gerçekten render edilen içerik arasındaki tutarsızlık giderilir
- Yeni API ile erişilebilirlik verilerinin senkronizasyonu sağlanır
- HTML ile WebGL shader birleştirme
- CSS filtre etkilerinin ötesinde, genel WebGL shader’larıyla HTML birleşimi ihtiyacını karşılar
- 3B bağlam içinde HTML render etme
- Oyun/sitenin 3B alanlarına zengin 2B içerik yerleştirilebilir
Önerilen API ve Temel Özellikler
<canvas layoutsubtree> özniteliğiyle canvas altındaki HTML öğelerinin düzeni etkinleştirilir (yalnızca görsel olarak render edilir, varsayılan olarak sayfa gezintisi gibi UA algoritmalarında görünmez)- CanvasRenderingContext2D.drawElement(element, x, y, options)
- canvas’ın çocuk HTML öğesini belirtilen konuma render eder
options.allowReadback ile gizli bilgi sızmasını engelleme kontrolü yapılır (ileride tainting politikası uygulanacak)dwidth/dheight parametreleriyle istenen boyuta yeniden boyutlandırma yapılabilir
- WebGLRenderingContext.texElement2D(...)
- Belirli bir HTML öğesi doğrudan WebGL dokusuna çizilerek 3B sahnede kullanılabilir
- setHitTestRegions
- Belirli bir alana çizilen öğe ile canvas hit test’i bağlanarak fare/dokunma olayları otomatik yönlendirilir
- fireOnEveryPaint seçeneği (ResizeObserver)
- HTML’deki değişikliklerde/göreli taşımada canvas yeniden render zamanını otomatik algılayıp yeniden çizimi tetikler
Davranış ve Sınırlamalar
- drawElement çağrısında canvas dönüştürme matrisi (CTM) yansıtılır, içerik yalnızca öğenin border box’ı içinde kırpılır
- Canvas’a çizilen görüntü statiktir (renderdan sonra öğe değişirse tekrar
drawElement çağrılması gerekir)
- Offscreen/DOM’da olmayan canvaslarda desteklenmez (teknik kısıt)
- Etkileşimli öğeler (buton, form vb.) çizilebilir ama otomatik olarak etkileşimli olmaz
- Cross-origin iframe’ler ve SVG
foreignObject desteklenmez
- Erişilebilirlik, güvenlik ve gizlilik (PII) konularındaki meseleler hâlâ tartışılıyor
Demo Örnekleri
- complex-text örneği:
drawElement ile canvas üzerindeki HTML stilindeki metin, kutu vb. karmaşık düzenleri doğrudan çizme
- webGL örneği:
texElement2D ile HTML içeriğini WebGL dokusuna dönüştürüp 3B küpe eşleme
- text-input örneği:
setHitTestRegions ve fireOnEveryPaint ile giriş formları gibi etkileşimli alanları işaretleme
Geliştirici Denemesi ve Dikkat Edilecek Noktalar
- Chrome Canary’da
--enable-blink-features=CanvasDrawElement bayrağıyla etkinleştirilir
- Canvas içeriği
tainted olmazsa bile kişisel verilerin sızmasına karşı dikkat şart
- API ve davranışlar hızla evriliyor; büyük ölçekli HTML test senaryoları henüz sınırlı
- Geri bildirim davetlidir: uyumluluk, render hatası örnekleri, erişilebilirlik sorunları gibi konular için GitHub Issue ile rapor önerilir
Kullanım Değeri ve Görünüm
- Grafikler, veri görselleştirme, in-canvas UI, 3B oyun içi HUD/menü gibi alanlarda web’in ifade gücü ve üretkenliğinin artacağı öngörülüyor
- Daha önce zor olan HTML→Canvas dönüşümü (stil, düzen, çoklu dil desteği, erişilebilirlik) artık standart API ile doğrudan işlenebiliyor
- Web tabanlı grafik, oyun ve uygulama geliştiricilerine güçlü bir yenilik olarak bekleniyor
Henüz yorum yok.