Convert HTML to PNG in the Browser Using SVG foreignObject (No Library)

There are plenty of libraries for converting HTML to an image — html2canvas, dom-to-image, modern-screenshot. They all do the same fundamental thing: serialize HTML into an SVG foreignObject, render it onto a , and export the canvas as a PNG or JPEG. But the underlying technique is simple enough that you do not need a library at all. I built an HTML to Image Converter using this approach in about 80 lines of code. Here is how the technique works, where it breaks, and what to watch for.