Demos

DOM Source

You can also render the text as a canvas element. Note how you can't drag and drop this element or open in a new tab, as opposed to a regular image.

This is also the only way to render text as an image that is not selectable in Safari!

Image (Canvas)

DOM Source

Another way is to render the canvas back on a regular image element as a data URI.

Image (Canvas / Image / Data URI)

DOM Source

Going even further - you can create a blob from the canvas and use that as the source for an image.

Image (Canvas / Image / Blob URI)

DOM Source

This is a simple demo of the text-to-image library. The text on the left will be rendered as an image on the right.

Image (SVG)

DOM Source

You can also use simple HTML tags like bold, italic, and underline. and alignment.

Image (SVG)

DOM Source

Emojis are also supported! 😊

As are structural elements like <p>

And lists

Item 1
Item 2
Item 3

Image (SVG)

DOM Source

Built-in fonts are also supported. However, only the styles of the context node are picked up by default. Styles on individual elements inside the markup to render are lost:

You could of course compile them yourself and pass them in the styles-option

Image (SVG)

Off-DOM Source

This example uses text from a script tag with a type that is not recognized by the browser. When using a method like this, you'll have to provide a good context node yourself, since the script tag likely has no styles:



<script type="ignore/this" data-is-source-node data-use-parent-node="1">
    This is text from a script tag with a type that is not recognized by the browser.
    <br />
    This useful when you want to render text that is not visible on the page.
    <br />
    Also this is an easy way to get around the the issue with self-closing tags.
</script>

Image (SVG)

Non-DOM Source

The right column will render an image that was entirely created from a string of text/markup. Since no context node is provided, the image will be rendered with the styles applied to document.body. Also I provide the forced width option to make the image only 300px wide.