GitHub上的WICG/html-in-canvas项目提出新的HTML Canvas API，旨在将HTML内容渲染到Canvas 2D和WebGL中，以解决现有Canvas在可访问性、国际化、性能和质量方面的不足。该提案是之前placeElement提案的子集，主要针对复杂文本和布局的渲染需求，适用于图表组件、创意工具中的富内容框以及游戏内菜单等场景。

HTML-in-Canvas 提案概述

标题: GitHub - WICG/html-in-canvas
URL: https://github.com/WICG/html-in-canvas

主要内容:
该提案旨在为Canvas 2D和WebGL引入新的API，以便将HTML内容渲染到Canvas中。当前，Web API缺乏将复杂文本和其他内容轻松渲染到<canvas>中的能力，导致基于Canvas的内容在可访问性、国际化、性能和质量方面存在不足。

提案状态:
该提案由Stephen Chenney、Chris Harrelson、Khushal Sagar、Vladimir Levin和Fernando Serboncini共同提出，Stephen Chenney和Chris Harrelson为主要推动者。该提案是之前提案的一个子集，涵盖了允许实时HTML元素的API。

动机:
- Canvas中的样式和布局内容: 当前Canvas缺乏对复杂文本样式的支持，例如图表组件（图例、坐标轴等）、创意工具中的富内容框以及游戏中的菜单。 - 可访问性改进: 目前无法保证Canvas的回退内容与渲染内容完全匹配，且生成回退内容较为困难。通过该API，绘制到Canvas位图中的元素将与其对应的Canvas回退内容匹配。 - HTML元素与着色器的结合: 虽然已经支持有限的CSS着色器（如滤镜效果），但开发者希望将通用的WebGL着色器与HTML结合使用。 - 3D上下文中的HTML渲染: 网站和游戏的3D场景中需要将丰富的2D内容渲染到3D场景中的表面上。

解决方案:
提案引入了以下API： - layoutsubtree: 允许<canvas>元素的子元素进行布局，并使其成为所有子元素的包含块。 - CanvasRenderingContext2D.drawElement(element, x, y, options): 将element及其子树渲染到2D Canvas中。 - WebGLRenderingContext.texElement2D(..., element): 将element渲染到WebGL纹理中。 - CanvasRenderingContext2D.setHitTestRegions(...): 用于将鼠标和触摸事件的点击测试从<canvas>元素重定向到绘制的元素。

其他细节:
- drawElement方法考虑了Canvas的当前变换矩阵（CTM），绘制的内容将被裁剪到元素的边框大小。 - ResizeObserverOptions中添加了fireOnEveryPaint选项，允许在绘制元素可能更改DOM状态时通知脚本。 - 绘制到Canvas中的图像是静态的，后续对元素的更改不会反映在Canvas中，必须显式重新绘制。 - 该功能不支持离屏Canvas上下文和分离的Canvas，因为当Canvas不在DOM中时绘制DOM内容存在技术挑战。

开发者试用信息:
开发者可以通过在Chrome Canary版本（138.0.7175.0之后）中启用--enable-blink-features=CanvasDrawElement来试用该功能。需要注意的是，该功能仍在开发中，API可能会随时更改，且Canvas内容不会被视为“污染”，因此需避免泄露敏感信息。

已知限制:
- 跨域iframe无法渲染。 - SVG foreignObject尚未支持。

反馈需求:
开发者可以就以下主题提供反馈：
- 哪些内容可以正常工作，哪些会失败？哪些失败模式最重要？
- 是否缺少对某些Canvas渲染上下文的支持？
- 该功能如何与可访问性功能交互？如何改进可访问性支持？

其他文档:
- 安全与隐私问卷

评论主要围绕“HTML in Canvas”这一技术展开，观点多样，既有支持也有反对。以下是总结：

支持观点：

1. 实用性与创新：部分评论认为该技术在某些场景下非常有用，特别是在WebXR等新兴技术中。

   • "This sounds really useful for being able to use standard web technology with webxr." (charcircuit)
   • "I support this, as odd as it is. There’s times when you’re needing something drawn but can easily reuse an html element from elsewhere." (reactordev)

2. 技术改进：有人认为这是对现有技术的一种改进，尤其是相比之前的“hacks”方案。

   • "I don’t know if this is the best solution but it’s better than previous hacks." (reactordev)

反对观点：

1. 复杂性：许多评论认为该技术过于复杂，甚至可能带来“递归地狱”。

   • "I’m not sure it’s such a pain as to invite this recursive hell." (SeanAnderson)
   • "HTML in canvas in HTML feels so cursed." (ha1zum)

2. 安全与隐私：部分评论担心该技术可能增加指纹识别的风险。

   • "I feel like this is bound to get kneecapped for the same reason as other canvas features, fingerprinting." (donatj)
   • "oh good, a new fingerprinting target." (turnsout)

3. 可访问性：有评论指出该技术可能损害网页的可访问性。

   • "RIP accessibility" (ivanjermakov)

中立观点：

1. 技术替代方案：部分评论提到现有技术（如SVG的foreignObject）已经可以实现类似功能。

   • "Where does SVG’s foreignObject fit into this? It seems that SVG supports all of the proposal already?" (tombh)

2. 布局与渲染问题：有评论指出在Canvas中实现HTML布局的困难，特别是文本渲染。

   • "Not all but most HTML. I have not found a good solution for the issue of doing something like MDX in canvas." (talkingtab)

其他观点：

1. 幽默与讽刺：部分评论以幽默的方式表达了对该技术的看法。
   • "Yo dawg, I heard you like HTML so I put HTML inside the canvas inside the HTML." (codelikeawolf)
   • "Next someone will want to render a canvas in the html in the canvas." (tones411)

总结：评论中对“HTML in Canvas”技术的看法分歧较大，支持者认为其具有实用性和创新性，而反对者则担忧其复杂性、安全性和可访问性问题。