dom-to-canvas Scriplet (in the url bar, enter `javascript:___`, where ___ is the copy/paste of the code)

dom-to-canvas_scriptlet.js

!function(e){function t(e,n,i,r,o,a){i>a.largestDepth&&(a.largestDepth=i);var l,d,c={children:[],childElementCount:e.childElementCount,attributes:{},depth:i,end:o,start:r,tagName:e.tagName,parentNode:n,__nodeRef:e.__nodeRef||e},u=e.attributes;if(u instanceof NamedNodeMap){l=u.length||0;for(var s=0;l>s;s++)d=u[s],c.attributes[d.name]=d.value}else c.attributes=e.attributes;e.id&&(c.id=e.id,a.ids[e.id]=c),m[e.tagName]&&m[e.tagName](c,e,a);for(var h,f,p=i+1,g=e.childElementCount,b=(o-r)/g,s=0;g>s;s++)f=r+s*b,h=t(e.children[s],c,p,f,f+b,a),c.children.push(h);return c}function n(e,n,i){var r={body:null,head:null,documentElement:null,ids:{},links:[],images:[],scripts:[],forms:[],largestDepth:0},o=t(e,null,0,n,i,r),a=Object.assign({},o,r);return a}function i(e,t,n){var r=t.tagName,o=t.start+(t.end-t.start)/2,a=t.depth*n+20;t.children.forEach(function(t){var r=t.start+(t.end-t.start)/2,l=t.depth*n+20;e.beginPath(),e.moveTo(o,a),e.lineTo(r,l),e.stroke(),e.closePath(),i(e,t,n)}),e.beginPath(),e.fillStyle=p[r]?p[r]:p.default,e.arc(o,a,T,b,v,!1),e.fill(),g[r]&&(e.fillStyle="#000",e.fillText(t.tagName,o+5,a-5))}function r(e,t,n){var i,o,a=e.start+(e.end-e.start)/2,l=e.depth*c+20,d=!(a-T>t||t>a+T||l-T>n||n>l+T);if(d)return e;for(o=0;o<e.childElementCount;o++)if(i=e.children[o],t>i.start&&t<i.end)return r(i,t,n);return null}function o(e){var t,o,a=e.offsetX,l=e.offsetY,d=f.canvas;if(20>a&&20>l&&C.length)o=C.pop();else{if(t=r(u,a,l),!t)return;o=n(t,0,d.width),C.push(u)}u=o,f.clearRect(0,0,d.width,d.height),C.length&&(f.fillStyle="#000",f.beginPath(),f.moveTo(10,10),f.lineTo(20,5),f.lineTo(20,15),f.fill()),c=d.height/(o.largestDepth+1),i(f,o,c)}function a(e){var t=e.offsetX,n=e.offsetY,i=r(u,t,n);if(i){var o=i.__nodeRef,a=o.style;s&&(s.style.backgroundColor=h),a&&(h=a.backgroundColor,a.backgroundColor="rgba(255, 255,0, 0.4)",s=o)}}function l(e,t){if(!(!t instanceof HTMLDocument)){f=e.getContext("2d");var r=n(t,0,e.width);u=r,c=e.height/(r.largestDepth+1),f.clearRect(0,0,e.width,e.height),f.strokeStyle="#ccc",i(f,r,c),C.length&&(f.fillStyle="#000",f.beginPath(),f.moveTo(10,10),f.lineTo(20,5),f.lineTo(20,15),f.fill()),e.addEventListener("click",o)}}function d(e,t){if(document&&document.createElement){e=e||400,t=t||300;var i=document.createDocumentFragment(),r=document.createElement("div"),o=document.createTextNode("close");r.appendChild(o);var d=document.createElement("canvas"),c="background: rgba(255,255,255,0.8);border: 1px solid #ccc;cursor: pointer;position: fixed;top: 5px;right: 5px;z-index: 999999";d.style.cssText=c,r.style.cssText="position:fixed;right: 10px;top: 10px;z-index:9999999;cursor:pointer;",d.setAttribute("width",e),d.setAttribute("height",t),l(d,document),i.appendChild(r),i.appendChild(d),document.body.appendChild(i);var f;d.addEventListener("mousemove",function(e){f&&clearTimeout(f),f=setTimeout(function(){a(e)},10)}),r.addEventListener("click",function(){document.body.removeChild(r),document.body.removeChild(d),s&&(s.style.backgroundColor=h)});var m=new MutationObserver(function(){C=C.map(function(e){return n(e.__nodeRef,0,d.width)}),u=n(u.__nodeRef,0,d.width),l(d,u)}),p={childList:!0,subtree:!0};m.observe(document,p)}}var c,u,s,h,f,m={HTML:function(e,t,n){n.documentElement=e},HEAD:function(e,t,n){n.head=e},BODY:function(e,t,n){n.body=e},FORM:function(e,t,n){n.forms.push(e)},SCRIPT:function(e,t,n){n.scripts.push(e)},A:function(e,t,n){t.attributes.href&&n.links.push(e)},AREA:function(e,t,n){t.attributes.href&&n.links.push(e)},IMG:function(e,t,n){n.images.push(e)}},p={HTML:"#000",HEAD:"#F00",BODY:"#0F0","default":"#2F73D8"},g={HTML:!0,HEAD:!0,BODY:!0},b=0,v=2*Math.PI,T=5,C=[];return e&&d(e.width,e.height),{drawDOM:l,renderCurrentDOM:d,createDOMLikeObject:n}}({});