一、等不及了
Chrome 150+之后，可以通过开启#canvas-draw-element特性体验HTML-in-Canvas的神奇效果。
Chrome地址栏输入下面代码可开启：
chrome://flags/#canvas-draw-element
通常Web新特性都都要等浏览器正式支持才介绍。
但是这次的这个特性，实在是等不及了。
在过去，Canvas里面实现元素动效是麻烦的，啰嗦的，往往需要借助第三方的组件。
而CSS实现动画动效非常方便。
现在，有了HTML-in-Canvas，所有的Web动效，包括SVG动效，都可以无缝接入到Canvas中，Canvas的应用能力直接飙升。
比方说HTML原生的<dialog>弹框使用非常方便，于是，过去，WebGL/Canvas 游戏中的弹窗和提示面板就可以直接使用HTML <dialog>元素，而无需像以前一样重写一套游戏 UI 交互：
- 游戏外悬浮 DOM：弹窗跟随游戏视口缩放很麻烦；游戏画布拖动缩放时 DOM 同步成本高。
- 手写绘图 API 绘制 UI：成本极高，不能复用现有组件库。
又比如HTML转图片这个功能。
之前我们大多使用 html2canvas 这个项目，简单点的会借助SVG <forginObject>元素实现（详见“SVG foreignObject简介与截图等应用”此文）。
但是html2canvas还有不支持CSS锥形渐变，一些CSS混合模式效果不支持的问题。
现在又了HTML-in-Canvas，等于原生有了HTML转图片的能力，既全面，又高性能，html2canvas直接可以说拜拜了。
二、使用非常简单
将HTML绘制在Canvas上的代码非常简单，几行代码的事情。
最核心的一行代码就是：
canvas.getContext('2d').drawElementImage(htmlElement, 0, 0);
就可以了。
Chrome开发者社区提供了很多HTML-in-Canvas的案例：https://chrome.dev/html-in-canvas/
可以看到，无论是Video视频、Form表单还是iframe内嵌框架，都可以绘制在Canvas画布上。
而且目前主流的前端3D开发框架，如There.js、Pixi.js都已经加入了对HTML-in-Canvas的支持。
所谓实践出真知，看别人写的Demo，不如自己写个Demo。
脑筋一转，不妨试试看能不能把LuLu UI的表单验证直接搬到Canvas画布上。
案例
您可以狠狠地点击这里：HTML in Canvas 绘制LuLu UI表单组件演示页面
可以看到，表单不仅渲染了，特么的自定义的JS验证UI居然也一起带到Canvas里面去了。
真是牛了个大发了！
相关的代码如下所示：
<canvas id="canvas" style="width: 100%;" layoutsubtree>