Sedbol
@Sedbol

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

Как отрисовать элементы в 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)
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
Проблема в src='coin.jpg', картинка не знает как подгружать внешние ресурсы, используйте так же data url и для вложенной картинки
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы