- Fitur ini memungkinkan rendering elemen DOM secara langsung dalam konteks Canvas 2D, WebGL, dan WebGPU.
- Fitur ini mempertahankan interaktivitas asli, aksesibilitas untuk pembaca layar, dan pengindeksan mesin pencari.
- Hal ini menghilangkan kebutuhan untuk menggunakan pustaka tangkapan layar eksternal untuk mengintegrasikan antarmuka web ke dalam lingkungan grafis yang kompleks.
Selama waktu yang sangat lama, kita yang berdedikasi pada pengembangan web terpaksa memilih antara dua jalur yang cukup kaku ketika membangun aplikasi visual yang canggih. Kita bisa mengandalkan DOM untuk memanfaatkan struktur semantik dan aksesibilitasnya, atau kita bisa langsung terjun ke elemen canvas untuk mendapatkan performa mentah dalam grafis tingkat rendah. Pada dasarnya, itu adalah pilihan antara kenyamanan struktural atau kekuatan visual , tanpa jalan tengah.
Namun di sinilah API HTML-in-Canvas eksperimental berperan, yang sudah tersedia melalui pengujian kode sumber. Alat ini benar-benar berharga karena memungkinkan kita untuk melukis konten DOM langsung ke kanvas 2D atau bahkan tekstur WebGL dan WebGPU, tetapi dengan satu detail penting: antarmuka tetap interaktif dan mudah diakses . Tidak perlu lagi memilih salah satu, karena sekarang kita dapat menggabungkan yang terbaik dari kedua dunia untuk menciptakan pengalaman yang hingga baru-baru ini tidak mungkin diprogram.
Dilema abadi: DOM versus Canvas
Untuk memahami mengapa ini merupakan pergeseran paradigma, kita perlu melihat apa yang masing-masing elemen berikan. DOM adalah fondasi web; ia menyediakan solusi tata letak teks siap pakai dan memungkinkan pengguna untuk melakukan tindakan alami, seperti memilih teks untuk disalin atau mengklik kanan gambar untuk menyimpannya. Selain itu, ia bekerja dengan lancar dengan alat aksesibilitas, mode membaca, ekstensi browser, dan zoom.
Di sisi lain, Canvas (dan pendahulunya WebGL dan WebGPU) memberi kita kendali penuh atas setiap piksel, yang sangat penting untuk game atau aplikasi yang sangat menuntut seperti Figma atau Google Docs. Masalahnya adalah, karena pada dasarnya merupakan grid piksel, apa pun yang kita masukkan ke dalamnya terperangkap dalam gambar statis . Jika Anda menginginkan teks responsif, Anda harus memprogram semua logika dari awal, yang memperbesar ukuran kode dan sepenuhnya merusak fungsionalitas browser asli.
Apa keuntungan yang kita peroleh dengan memasukkan DOM ke dalam Canvas?
API HTML-in-Canvas bertindak sebagai jembatan yang diperlukan. Dengan menempatkan HTML di dalam kanvas dan menyinkronkan transformasinya, kita mencapai konten yang sepenuhnya interaktif. Di antara keunggulan yang paling menonjol adalah tata letak teks yang disederhanakan , termasuk dukungan untuk bahasa dua arah atau beberapa baris melalui CSS, tanpa komplikasi.
Selain itu, kontrol formulir berfungsi dengan sangat baik dan jauh lebih mudah untuk disesuaikan. Namun fitur yang paling ampuh adalah konten yang ditampilkan pada kanvas diekspos ke pohon aksesibilitas, memungkinkan pembaca layar untuk menginterpretasikan antarmuka . Bahkan fungsi pencarian bawaan browser (Ctrl+F) dapat menemukan dan menyorot teks yang digambar di dalam tekstur WebGL—sesuatu yang terdengar seperti sihir tetapi sekarang menjadi kenyataan.
Kita juga tidak boleh melupakan bahwa web crawler dan agen AI dapat mengindeks konten, dan ekstensi browser bekerja secara native. Misalnya, jika Anda memiliki ekstensi yang menerjemahkan kata-kata, ekstensi tersebut akan secara otomatis memperbarui teks yang ditampilkan pada mesh 3D Anda. Bahkan dari DevTools Chrome, kita dapat memeriksa dan mengubah gaya CSS secara real-time dan melihat bagaimana pengaruhnya terhadap tekstur 3D.
Kasus penggunaan dan aplikasi kehidupan nyata
Teknologi ini membuka peluang luar biasa. Untuk aplikasi berbasis kanvas yang sangat besar, teknologi ini memungkinkan komponen antarmuka yang kompleks untuk dirender secara native, mengurangi ukuran bundle dan meningkatkan aksesibilitas. Di dunia video game dan WebXR, ini sangat berharga: Anda dapat membuat buku 3D yang halamannya berupa HTML asli atau terminal perintah dalam game yang memungkinkan penyalinan dan penempelan teks secara native.
Implementasi teknis: Langkah demi langkah
Saat ini, API masih dalam tahap awal (Chrome 148-150). Untuk mengujinya, Anda perlu menggunakan Chrome Canary dan mengaktifkan flag tersebut. chrome://flags/#canvas-draw-elementProses penggunaannya dibagi menjadi tiga fase utama.
1. Pengaturan Kanvas
Hal pertama yang perlu dilakukan adalah menambahkan atribut. layoutsubtree (o content="drawable" Pada versi yang lebih baru (seperti Chrome 157+), ini ditambahkan ke tag canvas. Ini memberi tahu browser bahwa ada elemen bersarang yang perlu disertakan dalam tata letak. Untuk mencegah konten terlihat buram, hal ini sangat penting. sesuaikan kisi kanvas pada faktor skala perangkat menggunakan ResizeObserver.
2. Proses rendering
Dalam konteks 2D, kita menggunakan metode drawElementImage dalam acara tersebut onpaintPeristiwa ini dipicu setiap kali elemen perlu digambar ulang, misalnya, ketika pengguna menyorot teks. Untuk WebGL, fungsi yang setara adalah texElementImage2D, dan untuk WebGPU digunakan copyElementImageToTextureDalam ketiga kasus tersebut, tujuannya adalah menerjemahkan DOM ke tekstur atau permukaan grafis.
3. Sinkronisasi Transformasi CSS
Di sinilah banyak yang gagal. Setelah elemen dirender, Anda harus memberi tahu browser di mana letaknya secara fisik di layar agar klik dan hover berfungsi. Dalam 2D, kita menerapkan transformasi yang dikembalikan oleh metode penggambaran ke properti tersebut. style.transform dari elemen tersebut. Dalam 3D, hal ini lebih kompleks, karena membutuhkan konversi matriks MVP WebGL ke dalam array DOM, normalisasi elemen dan petakan ke viewport kanvas.
Dukungan dan keterbatasan perpustakaan
Untungnya, kita tidak perlu melakukan semuanya secara manual. Three.js telah mengimplementasikan dukungan eksperimental melalui THREE.HTMLTextureSelain menangani sinkronisasi yang berat, PlayCanvas juga memungkinkan Anda untuk menetapkan font HTML ke tekstur Anda melalui API-nya sendiri. Namun, penting untuk dicatat bahwa, karena alasan keamanan, API tersebut... Ini tidak berfungsi dengan konten iframe. dari domain lain (cross-origin).
Batasan penting lainnya adalah bahwa pengguliran dan animasi di dalam kanvas bergantung pada JavaScript. Ini berarti bahwa keduanya tidak dapat diperbarui secara independen dari thread utama, sehingga kinerja harus dipantau saat menambahkan konten yang dapat digulir ke kanvas.
Privasi & Keamanan
Sistem ini dirancang untuk menghindari kebocoran informasi sensitif. Proses pewarnaan mengecualikan data dari domain eksternal, warna sistem, pemeriksa ejaan, dan informasi dari tautan yang dikunjungi. Penyorotan hasil pencarian internal dan tampilan bilah gulir diizinkan, karena hal ini tidak mengganggu privasi pengguna .
Arsitektur inovatif ini memungkinkan konten HTML diperlakukan sebagai gambar yang dinamis namun cerdas. Dengan mengintegrasikan alur rendering browser dengan kekuatan GPU, arsitektur ini memecahkan masalah aksesibilitas di lingkungan grafis dan secara dramatis menyederhanakan pembuatan antarmuka 3D yang kompleks, menjadikan web lebih inklusif dan berdampak visual tanpa mengorbankan fungsionalitas asli.