A settings panel, into the dock
One capture with the html-in-canvas engine becomes a WebGL texture that folds into the dock. The same frame from the raw API and from the SVG engine shows where each one differs.
snapdom(panel, { engine: 'html-in-canvas' }) gives one canvas painted by Chrome's own renderer, with the cross-origin avatar already in it. A vertex shader folds that canvas into the dock tile and unfolds it back. In Firefox, Safari and Chrome before 157 the same call gives you the SVG engine, and the fold works the same.
Try it
Checking this browser…
Change the plan, move the slider, scroll the invoices, then minimize. Click the tile in the dock to bring the panel back.
What the three frames show
The raw API draws a copy of the panel that lives inside a <canvas content="drawable">, because that is the only place drawElementImage() can draw from. The avatar and the cover pattern come from another origin, so Chrome leaves them out of the paint, even though that server allows CORS.
The SVG engine has the avatar, because SnapDOM fetched it and wrote it into the clone as a data URL. It draws the clone as an SVG image, so the invoice list can get a scrollbar the page does not show.
The html-in-canvas engine paints that same clone with Chrome's renderer. The avatar is there and the list looks like the page. This is the frame the dock animation uses.
How it works
One capture
snapdom(panel, { engine: 'html-in-canvas' }), thentoCanvas().The canvas becomes a texture
texImage2Duploads it once, and the live panel hides. Nothing is captured again while it moves.A grid of vertices folds it
An 8 by 60 vertex grid starts on the panel's box. As one progress uniform goes from 0 to 1, the lower rows narrow toward the dock tile first, then the whole grid slides down the funnel and lands inside the tile.
The tile is the same capture
The dock tile shows the canvas at thumbnail size. Clicking it runs the shader backward and shows the live panel again, with your changes still in it.
Copy-paste example
import { snapdom } from '@zumer/snapdom'
const result = await snapdom(panel, { engine: 'html-in-canvas' })
const canvas = await result.toCanvas()
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas)
// Animate a vertex grid from the panel's box into the dock tile.The vertex shader is in this page's source. Besides the canvas, it needs only the panel's box and the tile's box.