Html content on canvas

Question

How to append html content on canvas.I tried but not working. any way is there to append html on canvas.

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

The basic idea is to copy the HTML + the styles for the HTML to a <foreignObject>inside an SVG element. Then you take a screenshot of the SVG element and draw it on the canvas using drawImage. There are lots of problems especially if you want to use images, since tainted canvases may not be exported. Next come some code but I wouldn't advise to use it in production.

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>

Please click the button do get the screenshot. A canvas (dark background #333) element will be prepended to the body.