How to draw elements on canvas?

Question

JavaScript

How to draw elements on canvas? The text from the div block is rendered. And how to display a tag in a place with text?
If I insert a tag it is not drawn on the canvas.
So there is only text

let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
        let data = "data:image/svg+xml,"+
            "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
            "<foreignObject width='100%' height='100%' >" +
            "<div xmlns='http://www.w3.org/1999/xhtml'>Текст</div>" +
            "</foreignObject>" +
            "</svg>";
        let img = new Image();
        img.src = data;
        img.onload = function() { ctx.drawImage(img, 0, 0); }
        console.info(data)

And if so, then there is nothing. How to insert an img tag into a drawing in place with text?

let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
        let data = "data:image/svg+xml,"+
            "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
            "<foreignObject width='100%' height='100%' >" +
            "<div xmlns='http://www.w3.org/1999/xhtml'>Текст</div><img src='coin.jpg'>" +
            "</foreignObject>" +
            "</svg>";
        let img = new Image();
        img.src = data;
        img.onload = function() { ctx.drawImage(img, 0, 0); }
        console.info(data)

Answer 1

The problem is src='coin.jpg', the image does not know how to load external resources, use the same data url for the embedded image

Answer 2

html2canvas