how to convert svg inline element to canvas?

Question

heloo man and women

in my web app, there is a svg element (not file). i want to convert it to canvas. (just like screenshot)

can you share some practics?

this is a node project. so I do not want to import script tag

can you help?

Answer 1

I've trying, and you could use something like the following:

const canvas = document.getElementById("theCanvas");
const svg = document.getElementById("theSvg");
const context = canvas.getContext('2d');
const image = new Image();
image.addEventListener('load', () => {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
}, false);
image.src = URL.createObjectURL(new Blob([svg.outerHTML], {type: 'image/svg+xml'}));