BrainCoder
Tool info

HTML to Image

0 KB of 200 KB

Capture preview — exactly what the image will contain

Measured 0 × 0 CSS px.

Output format

Lossless and the largest file. Best for UI, code and anything with flat colour or sharp text.

Capture size

Scale multiplies every CSS pixel, so 2x of a 0 px box is a 0 × 0 px image. The cap is 16 MP and 8192 px per side; the scale is lowered rather than the file being refused, and never below 1x.

Paste HTML or open a .html file to get started. Up to 200 KB, captured at 1–4x. Nothing is uploaded and no request is made for your markup.

What this capture is — and is not

It is a re-draw, not a screen grab. html2canvas copies this page into an offscreen iframe, reads each element's computed style and repaints it with the canvas 2D API. It does not photograph your screen and it does not use an SVG foreignObject.

  • Painted: flexbox and grid exactly as your browser laid them out, inline styles, class rules, a <style> block, borders, border-radius, box-shadow, text-shadow, linear and radial gradients, tables, list markers, ::before and ::after, and any web font the page has already loaded.
  • Not painted: filter, backdrop-filter, mix-blend-mode, conic-gradient, repeating-linear-gradient, repeating-radial-gradient and object-fit.
  • Removed before rendering: <script>, <iframe>, <object>, inline <svg>, <canvas>, <video>, form controls, and every on* handler or javascript: URL. A <style> block is kept and applied to this page, so scope its selectors.
  • An image served without CORS headers is left out of the capture rather than drawn blank, and a remote <img src> or CSS url() is fetched by your browser exactly as any page would fetch it.
  • vw, vh and position: fixed resolve against the browser window, not the 0 px capture width. Content wider than the capture box is refused rather than silently cropped.
  • Input is capped at 200 KB, the image at 16 MP and 8192 px per side. A pasted capture is named capture-2x.png; an opened file keeps its own base name.