Chrome 157 新增 HTML-in-Canvas API，实现 Canvas 内可交互 HTML 元素

总结了Chrome的新功能“HTML-in-Canvas”的概要。

目次

1. 1. 什么是HTML-in-Canvas
2. 2. HTML-in-Canvas能做什么
3. 3. HTML-in-Canvas的主要用途
4. 3-1. 3D游戏与元宇宙
5. 3-2. 图形编辑工具
6. 3-3. 大型Web应用
7. 4. HTML-in-Canvas的使用方法
8. 4-1. 准备HTML元素
9. 4-2. 绘制到Canvas 2D
10. 5. 对主要库的支持

1. 什么是HTML-in-Canvas

2026年10月26日，Google宣布将在Chrome 157中正式提供“HTML-in-Canvas API”。

“HTML-in-Canvas”是一项新的Web API，允许直接在Canvas内绘制HTML元素。

在传统的Web应用中，主要通过以下两种方式来构建界面：

HTML可以利用浏览器标准功能，例如文本选择、输入表单以及基于CSS的布局。
相比之下，在Canvas上绘制的文本或按钮通常被视为图像的一部分，因此需要自行实现输入处理逻辑。

通过“HTML-in-Canvas”，可以在将HTML元素直接绘制到Canvas的同时，保留其作为DOM的功能。

对应的渲染方式有以下三种。

例如，可以在3D游戏内的显示器上显示HTML画面，并选择其中的文字或操作按钮。

本次将介绍“HTML-in-Canvas API”的主要功能、用途及使用方法。

2. HTML-in-Canvas能实现的功能

主要功能如下。

尤其重要的是，绘制在 Canvas 上的 HTML 并非单纯的图像，而是作为可操作的 DOM 被保留下来。

此外，其特点还在于AI agent和Web爬虫能够识别DOM的内容。

3. HTML-in-Canvas 的主要用途

3-1. 3D游戏与元宇宙

可以在游戏或元宇宙的3D空间内，放置用HTML制作的UI。

以往，需要将HTML转换为图像并贴到3D模型上，或者实现专为3D引擎设计的UI。

在HTML-in-Canvas中，可以将HTML作为3D对象的纹理使用，同时保持文字选择和表单操作等功能。

3-2. 图形编辑工具

也可用于图像编辑、设计、视频编辑等Web应用。

通过结合Canvas的绘图功能和HTML的编辑功能，可以更轻松地构建高级Web应用。

3-3. 大型Web应用

也可用于图形编辑、白板、数据可视化等场景。

过去需要将Canvas的绘制内容与叠加在其上的HTML的位置进行同步。

在HTML-in-Canvas中，浏览器端可以处理部分此类操作，因此有望简化实现。

4. HTML-in-Canvas的使用方法

4-1. HTML 元素的准备

首先，在 Canvas 内配置要绘制的 HTML 元素。

<canvas id="canvas"
        width="600"
        height="400"
        content="drawable">
  <div id="myElement" drawable>
    <h2>Hello Canvas!</h2>
    <button>Click Me</button>
  </div>
</canvas>

这里指定了以下两个属性。

4-2. 绘制到 Canvas 2D

通过 JavaScript 将 HTML 元素绘制到 Canvas 上。

const canvas = document.getElementById("canvas");
const myElement = document.getElementById("myElement");

const ctx = canvas.getContext("2d");

ctx.drawElementImage(myElement, 50, 50);

使用新添加的“drawElementImage()”。

与传统的 drawImage() 用于绘制图像等不同，drawElementImage() 可直接绘制 HTML 元素。

在 Canvas 2D 中，绘制的 HTML 元素的位置与 DOM 操作区域的同步基本上由浏览器自动处理。

虽然 WebGL 和 WebGPU 也可将 HTML 元素用作纹理，但为了同步绘制位置与 DOM 操作区域，需要执行 updateElementGeometry() 等额外处理。

5. 对主要库的支持

HTML-in-Canvas 正在逐步支持主要的 2D 和 3D 图形库。

これらを利用することで、HTMLで作成したUIを3Dモデルの表面などに表示できます。

ただし、各ライブラリの対応状況は異なり、試験的な実装も含まれています。

6. 対応ブラウザと注意点

HTML-in-Canvasは、オリジントライアルを経て、Chrome 157から安定版として提供されるAPIです。
ただし、Chrome以外のブラウザでも利用できるとは限らないため、対応状況の確認が必要です。
非対応の環境では、従来のCanvas描画や、Canvasの上にHTMLを重ねる方式などに切り替える必要があります。

HTML-in-Canvasは既存のCanvasを置き換えるものではなく、HTMLとCanvasを組み合わせたWebアプリを構築しやすくする技術です。

今后，除了游戏和3D应用外，还期待在设计工具和交互式Web应用等各种领域得到应用。