HTML-in-Canvas di Chrome 157: DOM interaktif di dalam 2D, WebGL, dan WebGPU

Natalia Markoborodova

Dipublikasikan: 26 Oktober 2026

Setelah uji coba origin yang berhasil, Chrome 157 menandai rilis stabil resmi HTML-in-Canvas API. HTML-in-Canvas API menjembatani kesenjangan antara dunia DOM yang interaktif dan mudah diakses serta kontrol tingkat piksel berperforma tinggi dari <canvas>. API ini memberi Anda yang terbaik dari kedua hal tersebut—kemampuan browser yang kaya dan grafis kanvas yang diakselerasi GPU.

Dilema kanvas versus DOM

Sebelumnya, saat membuat aplikasi web yang menuntut visual, Anda harus memilih antara elemen HTML standar dan konteks kanvas mentah.

Sebelum HTML-in-Canvas

Sebelum API ini, jika Anda membuat UI yang menggunakan banyak elemen canvas, Anda harus memilih di antara dua pendekatan, yang masing-masing memiliki kelemahan:

1. Merender teks langsung sebagai piksel kanvas (fillText()): Aplikasi menggambar teks dan kontrol UI secara imperatif sebagai piksel mentah. Pendekatan ini menghasilkan kelemahan berikut:
   • Masalah aksesibilitas: Pembaca layar dan alat bantu tidak dapat membaca piksel kanvas kecuali jika Anda membuat dan menyinkronkan DOM pengganti yang tidak terlihat secara manual.
   • Kehilangan fitur browser: Pengguna tidak dapat menelusuri dengan Temukan di Halaman (Ctrl/Cmd+F), menyalin dan menempelkan teks secara alami, memicu menu konteks, atau menggunakan terjemahan dan periksa ejaan browser.
   • Mesin tipografi yang kompleks: Mendukung internasionalisasi memerlukan penggabungan mesin tata letak JavaScript yang besar.
2. Overlay HTML mengambang di atas kanvas: Misalnya, menggunakan library yang memosisikan elemen HTML standar di atas kanvas dengan menghitung kotak pembatas dan transformasi matriks di JavaScript. Kekurangan dari pendekatan ini meliputi:
   • Lag sinkronisasi dan tearing visual: Men-scroll, melakukan zoom, atau menggerakkan kamera dalam 3D dapat menyebabkan elemen DOM overlay bergeser atau bergetar relatif terhadap piksel kanvas karena perbedaan waktu render frame.
   • Batasan pemangkasan dan pengurutan z: Overlay HTML selalu berada di atas seluruh buffer kanvas. Menyematkan HTML di dalam tampilan 3D (misalnya, di belakang objek 3D, di dalam material kaca, atau dipantulkan di cermin) tidak mungkin dilakukan tanpa solusi iframe-ke-gambar yang kompleks.
   • Overhead performa: Agar overlay tetap selaras dengan kanvas, Anda harus menghitung ulang transformasi setiap overlay di JavaScript dan menulisnya ke style.transform di setiap frame. Browser kemudian mengurai setiap string dan menghitung ulang gaya elemen sebelum dapat merender frame, sehingga pekerjaan thread utama bertambah dengan setiap overlay yang Anda tambahkan. Dalam konteks 2D, drawElementImage() akan memperbarui posisi elemen untuk Anda. Di WebGL dan WebGPU, Anda meneruskan transformasi yang Anda hitung ke updateElementGeometry() sebagai matriks. Apa pun itu, browser tidak mengurai CSS atau menghitung ulang gaya.

Manfaat utama HTML-in-Canvas

HTML-in-Canvas menghilangkan kompromi ini. Dengan menempatkan HTML di dalam elemen <canvas>, konten akan tetap interaktif, dan semua integrasi browser akan berfungsi secara otomatis.

Konten HTML yang dirender di dalam <canvas> memiliki kemampuan yang sama dengan HTML di luar <canvas>:

• Tata letak dan pemformatan teks: dukungan untuk tata letak dan pemformatan teks, termasuk teks multibaris atau dua arah dengan gaya CSS yang diterapkan.
• Kontrol formulir: kontrol formulir ekspresif dengan opsi penyesuaian CSS dan shader yang ekstensif.
• Pemilihan teks, salin dan tempel, serta klik kanan: Pengguna dapat menandai teks di dalam tampilan 3D atau memicu menu konteks.
• Aksesibilitas: Konten HTML yang dirender di dalam kanvas ditampilkan ke hierarki aksesibilitas untuk pembaca layar.
• Integrasi fitur browser: Fitur browser seperti terjemahan, isi otomatis, dan Temukan dalam Halaman langsung berfungsi. Pengguna dapat menerjemahkan atau menelusuri teks di dalam tekstur WebGL dan WebGPU.
• Integrasi ekstensi: Ekstensi browser berfungsi pada konten. Misalnya, ekstensi penggantian teks akan otomatis memperbarui teks yang dirender pada mesh 3D Anda.
• Integrasi DevTools: Periksa dan sesuaikan gaya CSS untuk elemen UI kanvas langsung di Chrome DevTools.
• Indeksabilitas dan agen AI: Web crawler dan agen AI dapat mengindeks konten DOM yang dirender ke dalam tampilan 2D dan 3D.
• Pengeditan dan ekspor media: Ekspor komposit kanvas penuh yang berisi elemen DOM aktif langsung ke gambar (toDataURL(), toBlob()) atau streaming video (captureStream()).

Kasus penggunaan utama

HTML-in-Canvas membuka kemampuan di beberapa area:

• Aplikasi berbasis kanvas besar: Aplikasi web yang berat dapat merender komponen UI langsung ke ruang kerja kanvas, sehingga meningkatkan aksesibilitas dan mengurangi ukuran paket.
• Scene dan game 3D: Pengalaman dan game WebXR yang imersif dapat memosisikan elemen DOM interaktif—seperti terminal dalam game atau buku 3D yang dapat dibaca—langsung di dalam scene.
• Pengeditan dan ekspor media: Alat kreatif yang menggabungkan tipografi HTML yang beragam dengan efek shader dapat mengekspor adegan gabungan langsung ke gambar atau streaming video.
• UI Ekspresif: Anda dapat memanipulasi konten HTML sebagai piksel mentah untuk membuat efek visual berbasis shader.

Panduan memulai HTML-in-Canvas

Merender HTML di kanvas memerlukan langkah-langkah berikut:

1. Siapkan kanvas Anda. Tetapkan atribut yang tepat secara deklaratif untuk memberi tahu browser bahwa browser harus merender HTML ke dalam kanvas. Penyiapan ini identik di seluruh konteks 2D, WebGL, dan WebGPU. Pelajari cara menyiapkan kanvas dan cara mendeklarasikan elemen HTML yang akan digambar secara independen.

   <!-- 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. Gambar gambar elemen ke dalam kanvas. Penerapan yang tepat bergantung pada apakah Anda merender HTML dalam konteks 2D, WebGL, atau WebGPU.

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

3. Opsional: Sinkronkan DOM dan piksel. Sinkronisasi geometri juga bergantung pada konteks yang Anda gunakan. Dalam 2D, browser menanganinya secara otomatis secara default, sedangkan dalam konteks 3D, Anda perlu membuat transformasi dan meneruskannya ke metode updateElementGeometry.

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

Dukungan framework dan ekosistem

Library grafis WebGL dan 3D utama mendukung HTML-in-Canvas:

• Three.js: menawarkan dukungan eksperimental menggunakan THREE.HTMLTexture.

  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: mendukung streaming tekstur HTML menggunakan setSource().

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

• Babylon.js: menyediakan binding bawaan melalui BABYLON.HtmlTexture.

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

• PixiJS: mengirimkan dukungan bawaan di versi v8.19.0 dengan HTMLSource.

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

• CanvasUI: library komponen open source yang dirancang khusus untuk HTML-in-Canvas.

Untuk mengetahui detail penerapan selengkapnya, lihat dokumentasi setiap framework.

Deteksi fitur dan strategi penggantian

Untuk memastikan kompatibilitas lintas browser, verifikasi dukungan API sebelum menjalankan kode Anda:

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

Jika API tidak tersedia, Anda dapat beralih ke UI alternatif, overlay HTML mengambang, atau salah satu library yang tersedia (misalnya, three-html-render, html2canvas, atau dom-to-image).

Langkah berikutnya

• Pelajari dokumentasi HTML-in-Canvas Chrome untuk Developer yang lengkap.
• Mengupgrade asisten coding menggunakan Modern Web Guidance.
• Berikan masukan di repositori GitHub WICG.
• Lihat demo komunitas HTML-in-Canvas.