HTML-in-Canvas：引爆前端交互！这个提案太疯狂了！

认真努力的小四子2026年04月30日约 3 分钟

作为一名前端，应该对 Canvas 都不陌生。

但只要你真正用它做过 UI，就会很快意识到一件事：

Canvas 很强，但也很“原始”。

画一个按钮要手写路径，排版文本要自己算坐标，做动画要维护状态——本质上，你是在“用代码重写一层渲染引擎”。

转折：HTML-in-Canvas

最近，一个新的提案开始被频繁讨论：HTML-in-Canvas。

先上个效果：

名字其实很直白——在 <canvas> 里使用 HTML。

你写的依然是熟悉的 HTML + CSS，但最终由 Canvas 负责绘制。

这听起来有点反直觉，但它确实在尝试解决一个老问题：

DOM 和 Canvas，一直是两个割裂的世界。

什么是 HTML-in-Canvas？

HTML-in-Canvas 是 WICG 提出的一个新提案，核心目标很明确：

让浏览器把真实的 DOM 渲染结果，直接绘制到 Canvas 上。

官方相关地址：https://wicg.github.io/html-in-canvas/

官方在 explainer 中给出的定位是：

在 2D / 3Dcanvas 中渲染 HTML 内容，并保持其布局、样式和交互能力。

注意，这里有几个关键点：

不是截图（html2canvas）
不是 SVG hack
不是 foreignObject
而是浏览器原生排版结果

同时，这个提案引入了一个重要机制：

👉 Canvas 子树参与布局，但不直接显示，由开发者控制何时绘制

一个简单示例：

<canvaslayoutsubtree>
<divid="ui">
<button>点击我</button>
</div>
</canvas>

const ctx = canvas.getContext("2d");
ctx.drawElementImage(document.getElementById("ui"), 0, 0);

你写的是普通 DOM，但最终显示在 Canvas 中。

它解决了什么问题？

从官方动机来看，这个提案主要是在解决 Canvas 长期存在的几个核心问题：

缺乏高质量文本与排版能力
UI 构建成本过高
可访问性（a11y）缺失
与现代渲染管线（GPU）协作不顺畅

UI 不再需要“手画”

过去在 Canvas 中写 UI，本质是逐像素绘制。

现在可以直接写 HTML：

<divclass="card">
<h1>标题</h1>
<p>内容</p>
</div>

布局、换行、样式全部交给浏览器处理。

文本和排版能力直接复用

Canvas 一直不擅长文本：字体、换行、多语言都比较麻烦。

HTML-in-Canvas 直接复用浏览器排版引擎，这一块基本“白送”。

3. 可访问性回归

传统 Canvas 对屏幕阅读器几乎不可见。

HTML-in-Canvas 中，DOM 依然存在，可以参与语义和交互，这对复杂 UI 非常重要。

4. 可以进入 GPU 渲染链路

HTML 可以被当作纹理使用：

WebGL
WebGPU
XR 场景

这让 UI 和 3D 渲染之间的边界变得更模糊。

5. 渲染控制更灵活

DOM 负责布局
Canvas 负责绘制

你可以自己决定何时重绘、如何动画、如何处理像素。

如何使用？

目前还是实验特性（Chromium 可用）：

chrome://flags/#canvas-draw-element

根据官方 explainer，核心能力主要集中在几个点：

layoutsubtree

让 canvas 内的 DOM 参与布局，但不直接显示。可以理解为“可布局但不可见的子树”。

drawElementImage

ctx.drawElementImage(element, x, y);

把 DOM 渲染结果绘制到 Canvas。

这是整个提案最核心的 API。

paint 机制

canvas.onpaint = () => {};
canvas.requestPaint();

当 DOM 内容变化时触发重绘。

相比传统 Canvas 的手动刷新，这里更接近“声明式更新”。

与 GPU 管线结合

官方还提供了与 GPU 的直接对接能力：

WebGL：texElementImage2D
WebGPU：copyElementImageToTexture

HTML 可以直接作为纹理参与渲染。

一些已经出现的用法

虽然目前还在实验阶段，但已经大佬做了非常多的优秀案例：

游戏 UI（HTML 写界面 + Canvas 渲染）
数据可视化（图表 + HTML 标签）
海报生成（直接导出）
WebGL / 3D UI（HTML 作为纹理）
设计工具（富文本 + 实时渲染）

一大波案例展示：

官方案例源码：https://github.com/WICG/html-in-canvas/tree/main/Examples

写在最后

HTML-in-Canvas 不一定会立刻改变日常开发，但它提供了一种新的可能：

用 HTML 写界面，用 Canvas 驱动渲染。

如果你在做可视化、游戏或 WebGL，这个方向值得多留意。

感兴趣的话，可以开个 flag 试一试，感受一下这种“有点不一样”的前端渲染方式。

提案说明：https://wicg.github.io/html-in-canvas/
Github 地址：https://github.com/WICG/html-in-canvas/