How I render screenshot mockups entirely in the browser (and why DOM-to-image was the wrong start)

1. The constraint
Why a screenshot tool uploading your screenshot is a bad default, and what changes if you refuse to.

2. The wrong first attempt
DOM-to-image / html2canvas. Show the actual artifacts: font fallback on export, shadows rendering differently than on screen, why foreignObject fidelity is not controllable enough to ship.

3. Direct canvas compositing
Layer model, draw order, how device frames are masked over the
screenshot. Include the real code for one composite step.

4. Persistence without a server
IndexedDB schema, why localStorage runs out, how a project reloads.

5. Export
toBlob, devicePixelRatio scaling, batch export across aspect ratios, and the SVG path.

6. What is still slow
Main-thread compositing on large canvases. The OffscreenCanvas plan.

try it here: https://portfolioframe.com/