Episode Details
Back to Episodes
Canvas 裡的字 AI 也讀得到：Chrome 開放新 API 試用
Description
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