Rendering HTML on the canvas as an SVG image blob.

html-to-canvas.js

const data = `
    <svg xmlns="http://www.w3.org/2000/svg">
        <foreignObject width="100%" height="100%">
            <div xmlns="http://www.w3.org/1999/xhtml" style="border: 2px solid red; padding: 20px;">
                <span style="font-size: 22px;">This will be rendered on the canvas.</span>
            </div>
        </foreignObject>
    </svg>
`;
const svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
const url = window.URL.createObjectURL(svg);
const img = document.createElement('img');

img.onload = () => {
    const ctx = document.querySelector('canvas').getContext('2d')
    ctx.drawImage(img, 0, 0);
    window.URL.revokeObjectURL(url);
}

img.src = url;