HTML-in-Canvas

「canvas の中に本物の HTML は描けない」——Web に20年来あった壁を壊す新 API のデモです。

HTML-in-Canvas API(Chrome origin trial 中)を使うと、生きた DOM 要素を WebGL テクスチャとして毎フレーム描画できます。非対応ブラウザでは自動的に古典技法(SVG foreignObject)へフォールバックし、2つの方式の違いを「時計が動くか」で体感できます。

フォールバック(SVG foreignObject スナップショット)で描画中。時計が止まっているのは、これが「その瞬間の写真」だからです。Chrome 148+ で chrome://flags/#canvas-draw-element を有効にすると、生きた DOM 描画に切り替わり時計が動き出します。
シェーダー

上のカードの中身(時計・文章)は本物の HTML。それを WebGL テクスチャに転送し、フラグメントシェーダーで歪ませています。