Как отрисовать элементы в canvas?

Question

[Sedbol]

Как отрисовать элементы в canvas? Текст из блока div отрисовывается. А как в месте с текстом отображать тег ?
Если я вставляю тег он не рисуется на canvas.

Так есть только текст

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)

А если вот так то ничего нету. Как вставлять тег img в от рисовку в месте с текстом?

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

[Дмитрий Беляев]

Проблема в src='coin.jpg', картинка не знает как подгружать внешние ресурсы, используйте так же data url и для вложенной картинки

Comments

[Sedbol]

Понял спасибо!!!!

Answer 2

[Александр]

html2canvas