Canvas 裡的字 AI 也讀得到：Chrome 開放新 API 試用

Chrome 新 API 讓畫進 canvas、WebGL、WebGPU 的 UI 仍能被 AI agent、瀏覽器翻譯、頁內搜尋讀到。2026 年 5 月開放 origin trial, 本文整理三步驟與 Three.js 支援 ⭐ 文章深度讀：跨瀏覽器時程還是空的, 影片裡 Chrome 工程團隊只說「正在和其他瀏覽器談」, Safari、Firefox 沒有任何 ship 時程。我會繼續盯著兩邊的進度, 一有實質動作再回來補完。 → https://heymaibao.com/chrome-html-in-canvas-api/ ⚡ 章節重點 開場 00:00 Canvas 對 AI 工具有多盲 01:02 API 三步驟心智模型 02:02 開發者其實不必啃底層 04:00 demo 裡真正打動我的不是 3D 04:48 採用狀態：值得試，但別當主力 07:40 我會怎麼用這個 API 08:19 總結與展望 08:57 📝 懶人包 ∙ HTML in Canvas API 讓 DOM 元素 (瀏覽器把網頁變成可操作物件的內部模型) 可以被畫進 canvas、WebGL、WebGPU 的 texture，同時保留點擊判定 (hit test)、無障礙、翻譯、頁內搜尋、dark mode、autofill 這些瀏覽器原生功能。 ∙ 採三步驟：在 `` 標籤宣告 `layoutsubtree` 屬性，用 `drawElementImage` (2D) / `texElementImage2D` (WebGL) / `copyElementImageToTexture` (WebGPU) 繪製，再把 API 回傳的 transform 套回 DOM 元素的 CSS transform，讓瀏覽器知道元素實際位置。 ∙ Three.js 和 PlayCanvas 都加入了實驗性整合，多數開發者不必直接寫底層 API。影片公布時，這套 API 在 Chrome 仍是 origin trial，Figma、Adobe、Miro、JetBrains 在 prototyping。 ∙ 我的觀察：對用 AI 工具的人，這個 API 的真正價值不是「3D UI 更炫」，而是「未來更多畫得很複雜的網頁介面，不會再對 AI agent 消失」。前提是要看 Safari、Firefox 後續會不會跟進，別把它當主力技術選型。 📚 參考資料 Build next-generation UIs with the HTML-in-Canvas API → https://www.youtube.com/watch?v=TUtKGTeFWjQ