Rendering HTML elements to canvas

Question

Is there a way to have an arbitrary HTML element rendered in a canvas  and then access its buffer

User · Answer

RasterizeHTML is a very good project  but if you need to access the canvas it wont work on chrome  due to the use of  lt foreignObject gt    If you need to access the canvas then you can use html2canvas  I am trying to find another project as html2canvas is very slow in performance

User · Answer

According to the HTML specification you can t access the elements of the Canvas  You can get its context  and draw in it manipulate it  but that is all   BUT  you can put both the Canvas and the html element in the same div with a aposition  relative and then set the canvas and the other element to position  absolute  This ways they will be on the top of each other  Then you can use the left and right CSS properties to position the html element   If the element doesn t shows up  maybe the canvas is before it  so use the z-index CSS property to bring it before the canvas

User · Answer

Here is code to render arbitrary HTML into a canvas  function render html to canvas html  ctx  x  y  width  height        var xml   html to xml html       xml   xml replace     g    23        var data    quot data image svg xml charset utf-8  quot    lt svg xmlns  quot http   www w3 org 2000 svg quot  width  quot   width   quot  height  quot   height   quot  gt                               lt foreignObject width  quot 100  quot  height  quot 100  quot  gt                             xml                            lt  foreignObject gt                               lt  svg gt         var img   new Image        img onload   function              ctx drawImage img  x  y             img src   data     function html to xml html        var doc   document implementation createHTMLDocument          doc write html           You must manually set the xmlns if you intend to immediately serialize             the HTML document to a string as opposed to appending it to a         lt foreignObject gt  in the DOM     doc documentElement setAttribute  xmlns   doc documentElement namespaceURI           Get well-formed markup     html    new XMLSerializer  serializeToString doc body       return html     example   x000D   x000D  const ctx   document querySelector  canvas   getContext  2d    const html      lt p gt this  lt p gt is  lt span style  color red  font-weight  bold   gt not lt  span gt   lt p gt  lt i gt xml lt  i gt    lt p gt  lt img src  data image png base64 iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 9hAAABWElEQVQ4jZ2Tu07DQBBFz9jjvEAQqAlQ0CHxERQ0 AItBV9Ew8dQUNBQIho6qCFE4Nhex4u85OHdWAKxzfWsx0d3HpazdGITA4kROjl0ckFrnYJmQlJrKsQZxFOIMyEqIMpADGhSZpikB1hAGsovdxABGuepC 4L0U7xRTG riG3J8fuvdifPKnmasXp5c2TB1HNPl24gNTnpeqsgmj1eFgayoHvRDWbLBOKJbn9WLGYflCCpmM 2a4Au6 PTjdH z9lCJQ9vyeq0w ve2kA3vaOnI6k4Pz 0Y24yP3Gapy Bw6qdfsCRZfWSWgclCCVXTZu5LZFXKJJ2sepW2KYNCENB3U5pw93zLoDjNK6E7rTFcgbkGYJtiLckxCiw4W1OURsxUE5BokQiQj3JIToVtKwlhsurq YDYbMBjuU W3KtT3xIbrpAD7E60lwQohuaMtP8ldI0uMbGfC1r1zyWPUAAAAASUVORK5CYII   gt    render html to canvas html  ctx  0  0  300  150     function render html to canvas html  ctx  x  y  width  height      var data    data image svg xml charset utf-8       lt svg xmlns  http   www w3 org 2000 svg  width      width      height      height      gt           lt foreignObject width  100   height  100   gt         html to xml html          lt  foreignObject gt           lt  svg gt       var img   new Image      img onload   function         ctx drawImage img  x  y         img src   data     function html to xml html      var doc   document implementation createHTMLDocument        doc write html         You must manually set the xmlns if you intend to immediately serialize           the HTML document to a string as opposed to appending it to a       lt foreignObject gt  in the DOM   doc documentElement setAttribute  xmlns   doc documentElement namespaceURI         Get well-formed markup   html    new XMLSerializer  serializeToString doc body     return html    x000D   lt canvas gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

Take a look on MDN  It will render html element using creating SVG images   For Example  There is  lt em gt I lt  em gt  like  lt span style  color white  text-shadow 0 0 2px blue   gt cheese lt  span gt  HTML element  And I want to add it into  lt canvas id  canvas  style  border 2px solid black   width  200  height  200  gt  lt  canvas gt  Canvas Element   Here is Javascript Code to add HTML element to canvas    x000D   x000D  var canvas   document getElementById  canvas    x000D  var ctx   canvas getContext  2d    x000D   x000D  var data     lt svg xmlns  http   www w3 org 2000 svg  width  200  height  200  gt     x000D      lt foreignObject width  100   height  100   gt     x000D      lt div xmlns  http   www w3 org 1999 xhtml  style  font-size 40px  gt     x000D      lt em gt I lt  em gt  like  lt span style  color white  text-shadow 0 0 2px blue   gt cheese lt  span gt     x000D      lt  div gt     x000D      lt  foreignObject gt     x000D      lt  svg gt    x000D   x000D  var DOMURL   window URL    window webkitURL    window  x000D   x000D  var img   new Image    x000D  var svg   new Blob  data     x000D    type   image svg xml charset utf-8  x000D      x000D  var url   DOMURL createObjectURL svg   x000D   x000D  img onload   function     x000D    ctx drawImage img  0  0   x000D    DOMURL revokeObjectURL url   x000D    x000D   x000D  img src   url  x000D   lt canvas id  canvas  style  border 2px solid black   width  200  height  200  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

The CSS element   function may eventually help some people here  even though it s not a direct answer to the question  It allows you to use an element  and all children  including videos  cross-domain iframes  etc   as a background image  and anywhere else that you d normally use url      in your CSS code   Here s a blog post that shows what you can do with it   It has been implemented in Firefox since 2011  and is being considered in Chromium Chrome  don t forget to give the issue a star if you care about this functionality

User · Answer

You won t get real HTML rendering to  lt canvas gt  per se currently  because canvas context does not have functions to render HTML elements   There are some emulations   html2canvas project http   html2canvas hertzen com index html  basically a HTML renderer attempt built on Javascript   canvas   HTML to SVG to  lt canvas gt  might be possible depending on your use case   https   github com miohtama Krusovice blob master src tools html2svg2canvas js  Also if you are using Firefox you can hack some extended permissions and then render a DOM window to  lt canvas gt   https   developer mozilla org en-US docs HTML Canvas Drawing Graphics with Canvas redirectlocale en-US amp redirectslug Drawing Graphics with Canvas Rendering Web Content Into A Canvas

[html] Rendering HTML elements to <canvas>

Examples related to html

Examples related to html5-canvas