# Demo 7：HTML-in-Canvas

<div class="grid grid-cols-2 gap-8 mt-8">

<div class="card-blue">
<div class="font-semibold mb-3">官方能力</div>
<div class="space-y-2 text-sm">

- 把真实 DOM 绘制进 Canvas / WebGL / WebGPU 场景
- 保留可访问性、搜索、翻译等浏览器能力
- 当前是 origin trial，环境要求高
- 现场必须准备 fallback

</div>
</div>

<div class="card-green">
<div class="font-semibold mb-3">本地演示</div>
<div class="space-y-2 text-sm">

- 打开 <span class="font-mono">/html-in-canvas/index.html</span>
- 支持时调用 <span class="font-mono">drawElementImage()</span>
- 不支持时显示同一 DOM 表单的 fallback 预览
- 讲清楚“DOM 进入画布”而不是“canvas 手绘控件”

</div>
</div>

</div>

<div class="mt-8 card-amber text-sm">
运行条件：Chrome Canary 149+，开启 <span class="font-mono">chrome://flags/#canvas-draw-element</span>；Chrome 官方说明该 API 在 Chrome 148-150 处于 origin trial。
</div>

<!--
官方依据：
- https://developer.chrome.com/blog/html-in-canvas-origin-trial

不要承诺现场一定能跑原生 API。演示核心是 API 方向和浏览器支持边界。
-->