HTML-in-Canvas: usulan API baru untuk merender konten HTML langsung ke Canvas

• HTML-in-Canvas adalah proyek WICG yang mengusulkan API standar baru yang memungkinkan menggambar langsung elemen/konten HTML ke dalam elemen <canvas> di web
• Muncul untuk mengatasi tata letak teks kompleks, aksesibilitas, internasionalisasi, serta masalah kualitas/kinerja, dan memungkinkan penggunaan styling HTML secara langsung pada berbagai kasus penggunaan Canvas seperti chart, UI, dan menu game
• Melalui metode baru seperti drawElement, texElement2D, setHitTestRegions, elemen HTML dapat dirender dan ditextur langsung ke konteks Canvas 2D atau WebGL
• Mencakup kebutuhan nyata pengembang web app seperti area interaksi, perbaikan aksesibilitas, UI 2D dalam adegan 3D, serta tata letak berbasis CSS/HTML
• Saat ini dapat diaktifkan sebagai flag eksperimental di Chrome Canary (mulai 138.0.7175.0), dan umpan balik utama/ laporan bug sangat disambut

---

Ikhtisar dan signifikansi

• Mengusulkan API baru untuk menggambar elemen HTML langsung ke <canvas>
• Sebelumnya tidak ada cara yang mudah untuk merender tata letak kompleks, teks, dan konten berbasis HTML ke <canvas>, sehingga ada keterbatasan dari sisi aksesibilitas, internasionalisasi, performa, dan kualitas
• HTML-in-Canvas hadir sebagai pelengkap ini, mendukung rendering HTML di Canvas 2D dan WebGL, dan meningkatkan kelayakan penggunaan pada alat chart, kotak rich text, UI game, dan area lain

Kasus penggunaan

• Representasi konten teks dan tata letak berstyling di dalam canvas
  • Contoh: legenda chart, sumbu, kotak rich editor, menu dalam game, dan lain-lain
• Peningkatan aksesibilitas
  • Mengatasi ketidaksesuaian antara konten alternatif canvas yang lama dan isi yang benar-benar dirender
  • Sinkronisasi informasi aksesibilitas dimungkinkan melalui API baru
• Kombinasi HTML dan shader WebGL
  • Menjawab kebutuhan integrasi HTML dan shader WebGL standar, melampaui efek filter CSS
• Rendering HTML dalam konteks 3D
  • Memungkinkan penyisipan konten 2D kaya di area 3D game/situs

API yang diusulkan dan fitur utama

• Mengaktifkan tata letak elemen HTML anak canvas melalui atribut <canvas layoutsubtree> (secara default hanya dirender secara visual, tidak diekspos ke algoritme penjelajahan halaman UA)
• CanvasRenderingContext2D.drawElement(element, x, y, options)
  • Merender elemen HTML anak canvas pada posisi yang ditentukan
  • Mengontrol pencegahan kebocoran data pribadi lewat options.allowReadback (kebijakan tainting akan diterapkan di kemudian hari)
  • Dapat di-resize ke ukuran yang diinginkan lewat parameter dwidth/dheight
• WebGLRenderingContext.texElement2D(...)
  • Menggambar elemen HTML tertentu langsung sebagai tekstur WebGL untuk dipakai di adegan 3D
• setHitTestRegions
  • Mengaitkan elemen yang digambar di area tertentu dengan event canvas (hit test), lalu mengarahkan ulang event mouse/sentuh secara otomatis
• fireOnEveryPaint option (ResizeObserver)
  • Mendeteksi otomatis timing reren­der saat perubahan/penataan ulang HTML agar memicu penggambaran ulang canvas

Perilaku dan keterbatasan

• Saat memanggil drawElement, matriks transformasi canvas (CTM) diterapkan, kliping gambar hanya di dalam border box elemen
• Gambar yang dirender di canvas bersifat statis (jika elemen berubah setelah render, drawElement perlu dipanggil lagi)
• Tidak didukung untuk canvas offscreen atau canvas yang tidak ada di DOM (batasan teknis)
• Elemen interaktif (tombol, form, dll.) dapat digambar, tetapi tidak otomatis interaktif
• Iframe lintas-origin, SVG foreignObject, dan sejenisnya belum didukung
• Isu aksesibilitas serta keamanan/privasi (PII) masih terus didiskusikan

Contoh demo

• Contoh complex-text: menggambar langsung kompleksitas seperti teks dan box bergaya HTML di atas canvas menggunakan drawElement
• Contoh webGL: membuat konten HTML menjadi tekstur WebGL dengan texElement2D lalu memetakan ke kubus 3D
• Contoh text-input: menandai area interaktif seperti form input menggunakan setHitTestRegions, fireOnEveryPaint

Uji coba untuk pengembang dan perhatian

• Aktifkan dengan flag --enable-blink-features=CanvasDrawElement di Chrome Canary
• Karena isi canvas tidak ter-taint, wajib waspada terhadap potensi kebocoran data pribadi
• API dan perilaku terus berubah, dan kasus uji HTML skala besar masih terbatas
• Feedback dipersilakan: disarankan melaporkan isu kompatibilitas, kegagalan render, masalah aksesibilitas, dan lain-lain lewat GitHub Issue

Nilai guna dan prospek

• Pada chart, visualisasi data, UI di dalam canvas, serta HUD/menu dalam game 3D dan area lain, potensi peningkatan ekspresivitas dan produktivitas web cukup besar
• Konversi HTML→Canvas yang sebelumnya rumit (styling, tata letak, dukungan multibahasa, aksesibilitas) dapat diproses langsung melalui API standar
• Diharapkan menjadi teknologi kuat bagi pengembang grafis, game, dan aplikasi berbasis web