i realize canvas cannot directly render html. however, seems there potential workarounds. don't need html render perfectly, i'd @ least image of rendered html.
to end, attempted convert html svg. works basic html, breaks many use cases (such including images in html):
var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); var img = new image(); var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + screen.width + '" height="' + screen.height + '">' + '<foreignobject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml">' + document.body.innerhtml + '</div></foreignobject></svg>' var svg = new blob([data], {type: 'image/svg+xml;charset=utf-8'}); var url = domurl.createobjecturl(svg); img.onload = function () { ctx.drawimage(img,0,0,c.width,c.height); domurl.revokeobjecturl(url); } img.src = url; is there simpler way of getting html displaying correctly on canvas?
you potentially create basic recursive function descend children of <canvas> element uses switch or event handler object handle elements. demonstrate former here:
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.clearrect( 0, 0, canvas.width, canvas.height ); var y = 50; //set largest text var offset = 25; (function descend(parent){ for( var = 0; < parent.childnodes.length; i++ ){ var child = parent.childnodes[i]; var name = child.tagname; var val = child.innerhtml; if( child.haschildnodes() ) descend(child); switch( name ){ case 'h1': ctx.font = "normal 48px arial"; y += 25; ctx.filltext( val, offset, y ); y += 25; break; case 'h2': ctx.font = "normal 36px arial"; y += 20; ctx.filltext( val, offset, y ); y += 20; break; case 'h3': ctx.font = "normal 24px arial"; y += 12; ctx.filltext( val, offset, y ); y += 12; break; default: break; } } })( canvas );<canvas id="canvas" width="300" height="300"><h1>h1</h1><h2>h2</h2><h3>h3</h3></canvas>this code utilizes function descend element tree of element , handles elements different rendering techniques. may seem little bit excessive, if looking effective way achieve goal, method works. flexibility of rendering, being ability choose how render elements how want to, if want render <span>'s red reason, can that. function provided extremely basic, rendering <h1>-<h3>, , when start mix them around inside , gets little "render jerky". demonstrates concept well, , think may find effective.
although thoughts posted in comments admirable, if looking flexibility or rather have control on rendering, may solution looking for.
note: code not detect updates in <canvas> element's dom; need mutation observer that. might wish place code inside of function run when page loaded, javascript runtime can find <canvas> element.
Comments
Post a Comment