demo · v138

Screenshot export

The use case the html2canvas library has approximated for a decade, native at last. Edit the live DOM below, click “capture”, and the same form — including its current values, focus state, and CSS — rasterises into a canvas you can download as PNG.

checking drawElement support…
Behind a flag. Enable chrome://flags/#enable-experimental-web-platform-features or the CanvasDrawElement origin trial. Without it, the capture falls back to a synthesised placeholder so the page still demonstrates the API surface.

Receipt for Order #4231

paid · £43.20

captured at 1×

captured at 2× (retina-quality PNG)

the call

const ctx = canvas.getContext("2d");
// 138+: render the live DOM subtree as if it were an image
ctx.drawElement(document.getElementById("live"), 0, 0);
// scaling, transforms, alpha all work — it's an HTMLImage-shaped source
ctx.drawElement(element, 0, 0, 640, 440); // 2× capture
canvas.toBlob((blob) => saveAs(blob, "receipt.png"));

Before this, libraries walked the DOM, computed used styles, re-implemented inline layout in JS, and approximated each pixel. They were always one CSS feature behind the platform. drawElement() hands the rasterisation to the browser’s real compositor — the same code that already paints the live element.

see also