const canvas = await snapdom.toCanvas(element) returns a canvas ready for drawImage or toDataURL.
Copy-paste example
Install @zumer/snapdom, select the rendered element, and capture it:
import { snapdom } from '@zumer/snapdom'
const element = document.querySelector('#dashboard')
const canvas = await snapdom.toCanvas(element, { dpr: 2 })
document.body.appendChild(canvas)Why this pattern works
A canvas is useful when you need to composite the capture with other pixels, inspect pixel data, encode it yourself, or feed it into another browser API.
SnapDOM captures through its SVG pipeline first and rasterizes only for the canvas export.
Render this element to Canvas
The output below is a real HTMLCanvasElement, ready for more drawing or encoding.
Rendered by the browser from a live DOM element.
Limits and common mistakes
Canvas is a bitmap. Increasing dpr creates more pixels and sharper output, but also uses more memory. Cross-origin images still need valid CORS headers or a configured proxy.
Frequently asked questions
Does SnapDOM draw every CSS property manually?
No. It serializes the styled clone and lets the browser render it before rasterizing to canvas.
How do I export the canvas as PNG?
Call snapdom.toPng(element), or use canvas.toBlob after toCanvas when you need custom canvas processing first.
Capture it in the browser
Install SnapDOM and turn the DOM your users already see into a portable image.
Open the demoInstall from npm