Содержание HTML на холсте

Question

Как добавить HTML-контент на холст. Я пытался, но не работает. есть ли способ добавить html на холст.

http://jsfiddle.net/mktgnp3e/780/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

 var html="<span><p>Content....</p></span>";

ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50); 
ctx.font = "30px Verdana"; 
 var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
 gradient.addColorStop("1.0", "red");
 // Fill with gradient
 ctx.fillStyle = gradient;  
 ctx.fillText(html, 10, 90);

Answer 1

Основная идея заключается в том, чтобы скопировать HTML + стили для HTML в <foreignObject> внутри элемента SVG. Затем вы делаете скриншот элемента SVG и рисуете его на холсте, используя drawImage. Существует много проблем, особенно если вы хотите использовать изображения, поскольку испорченные полотна могут не экспортироваться. Далее следует код, но я бы не советовал использовать его в производстве.

let HTMLcontent = document.querySelector("#content");
let w = 340,h = 240;

(function copyCSS(){
  let styles0 = document.querySelectorAll("style")[0]
  let oldStyle = styles0.textContent;
  let newStyle = document.createElement("style");
  newStyle.textContent = oldStyle;
  styles0.parentNode.removeChild(styles0);
  HTMLcontent.prepend(newStyle);
})();

// SVG need well formed XHTML
HTMLcontent.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"); 
let xml = new XMLSerializer().serializeToString(HTMLcontent);


let data = `<svg xmlns= 'http://www.w3.org/2000/svg' width='${w}' height='${h}'>
           <foreignObject width='100%' height='100%' >`+
       
            xml+
    
           `
           </foreignObject>
           </svg>`;



button.addEventListener("click",function(){

 
let img = new Image();
let svg = new Blob([data], {type: 'image/svg+xml'});
let url = URL.createObjectURL(svg);
img.src = url;
img.onload = function() {
  

let canvas = document.createElement('canvas');
canvas.width = w; 
canvas.height = h;
canvas.getContext('2d').drawImage(this, 0, 0,this.naturalWidth,this.naturalHeight);
  document.body.prepend(canvas);


  URL.revokeObjectURL(url); 
}

});

canvas{background:#333;}
html {
  font-size: 16px;
 
}
#content{
  width:250px;
  background-color: #e9e9e9;
  border:1px solid #d9d9d9;
  padding:1em;
  margin:1em;
  border-radius:10px;
}
h1 {
  color: #333;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  max-width: calc(5 * 16rem);
  margin: 1em auto;
  border-bottom: 1px solid #d9d9d9;
}

 p {
  font-size: .8rem;
  line-height: 150%;
  text-align:center;
}

<div id="content">
  <h1>How to append html content on canvas</h1>
  <p>I tried but not working. Any way is there to append html on canvas?</h1>
</div>

<button id="button" style="margin: .5em;">Get screenshot</button>

Пожалуйста, нажмите на кнопку, чтобы получить скриншот. Элемент canvas (темный фон # 333) будет добавлен к телу.