Overlay-compositing concern extracted from recording-panel.ts.
The recording pipeline draws its own copy of the visible DOM
overlays onto the capture canvas so that screenshot / video output
matches what the user sees on screen. The canvas-2D pipeline is
pure given:
the capture canvas + 2D context,
the list of currently-visible overlays (from OverlayManager),
the renderer's GL canvas (only needed for the HTML branch's
coordinate mapping).
Text, image, and video overlays are drawn with canvas-2D primitives (one
blend-mode map, one save/restore per overlay, the shared anchor
offset rules); HTML overlays are rasterized by wrapping the live node
in an <svg><foreignObject> data URL. That wrapper is parsed as XML,
so the markup is XML-serialized rather than read off outerHTML —
HTML serialization leaves void elements such as <br> unclosed,
which is fatal there. Wrapped text follows the DOM's own
white-space: normal layout, where a \n is a space and not a
break.
Overlay-compositing concern extracted from
recording-panel.ts.The recording pipeline draws its own copy of the visible DOM overlays onto the capture canvas so that screenshot / video output matches what the user sees on screen. The canvas-2D pipeline is pure given:
Text, image, and video overlays are drawn with canvas-2D primitives (one blend-mode map, one save/restore per overlay, the shared anchor offset rules); HTML overlays are rasterized by wrapping the live node in an
<svg><foreignObject>data URL. That wrapper is parsed as XML, so the markup is XML-serialized rather than read offouterHTML— HTML serialization leaves void elements such as<br>unclosed, which is fatal there. Wrapped text follows the DOM's ownwhite-space: normallayout, where a\nis a space and not a break.