Chrome 157'de HTML-in-Canvas: 2D, WebGL ve WebGPU'da etkileşimli DOM

Natalia Markoborodova

Yayınlanma tarihi: 26 Ekim 2026

Başarılı bir kaynak denemesinin ardından Chrome 157, HTML-in-Canvas API'nin resmi kararlı sürümünü sunuyor. HTML-in-Canvas API, DOM'un etkileşimli ve erişilebilir dünyası ile <canvas>'un yüksek performanslı, piksel düzeyinde kontrolü arasındaki boşluğu doldurur. Bu API, hem zengin tarayıcı özelliklerini hem de GPU ile hızlandırılmış tuval grafiklerini bir arada sunar.

Tuval ve DOM ikilemi

Daha önce, görsel açıdan zorlu web uygulamaları oluştururken standart HTML öğeleri ile ham tuval bağlamları arasında seçim yapmanız gerekiyordu.

HTML-in-Canvas'tan önce

Bu API'den önce, yoğun tuval içeren kullanıcı arayüzleri oluşturduysanız her birinin kendi dezavantajları olan iki yaklaşım arasında seçim yapmanız gerekiyordu:

1. Metni doğrudan tuval pikselleri olarak oluşturma (fillText()): Uygulamalar, metin ve kullanıcı arayüzü kontrollerini zorunlu olarak ham piksel şeklinde çiziyordu. Bu yaklaşım aşağıdaki olumsuz sonuçlara yol açtı:
   • Erişilebilirlik sorunu: Görünmez bir yedek DOM'u manuel olarak oluşturup senkronize etmediğiniz sürece ekran okuyucular ve yardımcı araçlar tuval piksellerini okuyamaz.
   • Tarayıcı özelliklerinin kullanılamaması: Kullanıcılar sayfada bul (Ctrl/Cmd+F) özelliğiyle arama yapamaz, metinleri doğal bir şekilde kopyalayıp yapıştıramaz, bağlam menülerini tetikleyemez veya tarayıcı çevirisi ve yazım denetimi özelliklerini kullanamaz.
   • Karmaşık tipografi motorları: Uluslararasılaştırmayı desteklemek için büyük JavaScript düzen motorlarının paketlenmesi gerekir.
2. Tuvalin üzerinde kayan HTML yer paylaşımları: Örneğin, JavaScript'te sınırlayıcı kutuları ve matris dönüşümlerini hesaplayarak standart HTML öğelerini tuvalin üzerine yerleştiren kitaplıkları kullanma. Bu yaklaşımın dezavantajları şunlardır:
   • Senkronizasyon gecikmesi ve görsel yırtılma: 3D'de kaydırma, yakınlaştırma veya kamera hareketleri, kare zamanlama farklılıkları nedeniyle yer paylaşımlı DOM öğelerinin tuval piksellerine göre kaymasına veya titremesine neden olabilir.
   • Kırpma ve z sıralaması sınırlamaları: HTML yer paylaşımları her zaman tüm tuval arabelleğinin üstünde yer alır. HTML'yi 3D sahnenin içine yerleştirmek (örneğin, 3D nesnenin arkasına, cam malzemenin içine veya aynaya yansıtmak) karmaşık iframe'den resme geçici çözümler olmadan mümkün değildi.
   • Performans ek yükü: Yer paylaşımlarını tuvalle uyumlu tutmak için her yer paylaşımının dönüşümünü JavaScript'te yeniden hesaplamanız ve her karede style.transform değerine yazmanız gerekir. Ardından tarayıcı, her dizeyi ayrıştırır ve kareyi oluşturmadan önce öğenin stilini yeniden hesaplar. Bu nedenle, eklediğiniz her yer paylaşımlı reklamla birlikte ana iş parçacığı çalışması artar. 2D bağlamda drawElementImage(), öğenin konumunu sizin için günceller. WebGL ve WebGPU'da, hesapladığınız dönüşümü matris olarak updateElementGeometry()'e iletirsiniz. Her iki durumda da tarayıcı, CSS'yi ayrıştırmaz veya stilleri yeniden hesaplamaz.

HTML-in-Canvas'ın temel avantajları

HTML-in-Canvas bu ödünleri ortadan kaldırır. HTML'yi <canvas> öğesinin içine yerleştirdiğinizde içerik etkileşimli kalır ve tüm tarayıcı entegrasyonları otomatik olarak çalışır.

<canvas> içinde oluşturulan HTML içeriği, <canvas> dışındaki HTML ile aynı özelliklere sahiptir:

• Metin düzeni ve biçimlendirme: CSS stilleri uygulanmış çok satırlı veya çift yönlü metinler de dahil olmak üzere metin düzeni ve biçimlendirme desteği.
• Form kontrolleri: Kapsamlı CSS ve gölgelendirici özelleştirme seçenekleri sunan etkileyici form kontrolleri.
• Metin seçme, kopyalama ve yapıştırma ile sağ tıklama: Kullanıcılar, 3D sahnelerdeki metinleri vurgulayabilir veya bağlam menülerini tetikleyebilir.
• Erişilebilirlik: Tuval içinde oluşturulan HTML içeriği, ekran okuyucular için erişilebilirlik ağacına gösterilir.
• Tarayıcı özellikleri entegrasyonu: Çeviri, otomatik doldurma ve sayfada bulma gibi tarayıcı özellikleri kullanıma hazırdır. Kullanıcılar, WebGL ve WebGPU dokularındaki metinleri çevirebilir veya arayabilir.
• Uzantı entegrasyonu: Tarayıcı uzantıları içerik üzerinde çalışır. Örneğin, metin değiştirme uzantısı, 3D mesh'lerinizde oluşturulan metni otomatik olarak günceller.
• Geliştirici Araçları entegrasyonu: Canvas kullanıcı arayüzü öğelerinin CSS stillerini doğrudan Chrome Geliştirici Araçları'nda inceleyip düzenleyin.
• Dizine eklenebilirlik ve yapay zeka ajanları: Web tarayıcıları ve yapay zeka ajanları, 2D ve 3D sahnelere dönüştürülen DOM içeriğini dizine ekleyebilir.
• Medya düzenleme ve dışa aktarma: Canlı DOM öğeleri içeren tam tuval kompozitlerini doğrudan resimlere (toDataURL(), toBlob()) veya video akışlarına (captureStream()) aktarın.

Birincil kullanım alanları

HTML-in-Canvas, çeşitli alanlarda yeni özellikler sunar:

• Tuval tabanlı büyük uygulamalar: Ağır web uygulamaları, kullanıcı arayüzü bileşenlerini doğrudan tuval çalışma alanlarında oluşturarak erişilebilirliği artırabilir ve paket boyutunu küçültebilir.
• 3D sahneler ve oyunlar: Sürükleyici WebXR deneyimleri ve oyunlar, etkileşimli DOM öğelerini (ör. oyun içi terminaller veya okunabilir 3D kitaplar) doğrudan sahnelerin içine yerleştirebilir.
• Medya düzenleme ve dışa aktarma: Zengin HTML tipografisini gölgelendirici efektleriyle birleştiren reklam öğesi araçları, birleşik sahneleri doğrudan resimlere veya video akışlarına aktarabilir.
• Etkileyici kullanıcı arayüzleri: Gölgelendirici tabanlı görsel efektler oluşturmak için HTML içeriğini ham piksel olarak değiştirebilirsiniz.

Canvas'ta HTML hızlı başlangıç kılavuzu

HTML'yi bir tuvalde oluşturmak için aşağıdaki adımlar gerekir:

1. Tuvalinizi hazırlayın. Tarayıcının HTML'yi bir tuvalde oluşturması gerektiğini bildirmek için doğru özellikleri bildirimli olarak ayarlayın. Bu kurulum 2D, WebGL ve WebGPU bağlamlarında aynıdır. Tuvalinizi nasıl ayarlayacağınızı ve HTML öğelerini bağımsız olarak çizilecek şekilde nasıl tanımlayacağınızı öğrenin.

   <!-- Prepare your canvas by setting the `content` attribute -->
   <canvas id="canvas" width="600" height="400" content="drawable">
     <!-- Mark child as `drawable` to render to canvas -->
     <div id="myElement" drawable>
       <!-- Your HTML here -->
     </div>
   </canvas>
   

2. Öğe resmini tuvale çizin. Tam uygulama, HTML'yi 2D, WebGL veya WebGPU bağlamında oluşturmanıza bağlıdır.

   const ctx = canvas.getContext("2d");
   // Draw HTML element into canvas in 2D
   ctx.drawElementImage(myElement, myElementX, myElementY);
   

3. İsteğe bağlı: DOM ve pikselleri senkronize edin. Geometri senkronizasyonu, kullandığınız bağlama da bağlıdır. 2D'de tarayıcı bunu varsayılan olarak otomatik şekilde işler. 3D bağlamlarda ise bir dönüşüm oluşturup bunu updateElementGeometry yöntemine iletmeniz gerekir.

   // In 3D, construct a transform as needed, for example:
   const transform = new DOMMatrix().translate(x, y);
   // Synchronize the element's DOM and pixels
   canvas.updateElementGeometry(myElement, { canvasTransform: transform });
   

Çerçeve ve ekosistem desteği

Önemli WebGL ve 3D grafik kitaplıkları, HTML-in-Canvas'ı destekler:

• Three.js: THREE.HTMLTexture kullanarak deneysel destek sunar.

  const material = new THREE.MeshBasicMaterial();
  material.map = new THREE.HTMLTexture(uiElement);
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
  scene.add(mesh);
  

• PlayCanvas: setSource() kullanarak HTML doku akışını destekler.

  canvas.addEventListener('paint', () => {
    htmlTexture.setSource(htmlElement);
  }, { once: true });
  

• Babylon.js: BABYLON.HtmlTexture aracılığıyla yerleşik bağlama sağlar.

  const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);
  material.diffuseTexture = htmlTexture;
  

• PixiJS: v8.19.0 sürümünde HTMLSource ile yerleşik destek sunuldu.

  import { HTMLSource } from 'pixi.js/html-source';
  const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
  app.stage.addChild(sprite);
  

• CanvasUI: Canvas'ta HTML için özel olarak tasarlanmış açık kaynaklı bir bileşen kitaplığıdır.

Uygulamayla ilgili daha fazla bilgi için her bir çerçevenin belgelerini inceleyin.

Özellik algılama ve yedek stratejiler

Tarayıcılar arası uyumluluğu sağlamak için kodunuzu çalıştırmadan önce API desteğini doğrulayın:

export function supportsHtmlInCanvas() {
  if (typeof document === "undefined") return false;
  const canvas = document.createElement("canvas");
  canvas.setAttribute("content", "drawable");
  return canvas.content === "drawable";
}

API kullanılamıyorsa alternatif kullanıcı arayüzlerine, kayan HTML yer paylaşımlarına veya mevcut kitaplıklardan birine (ör. three-html-render, html2canvas veya dom-to-image) geri dönebilirsiniz.

Sonraki adımlar

• Geliştiriciler için Chrome HTML-in-Canvas belgelerinin tamamını inceleyin.
• Modern Web Rehberi'ni kullanarak kod yazma desteğini yükseltin.
• WICG GitHub deposunda geri bildirim paylaşın.
• HTML-in-Canvas topluluk demolarına göz atın.