canvg playground

by ischenkodv

HTML

<script src="https://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script src="https://gabelerner.github.io/canvg/StackBlur.js"></script>
<script src="https://gabelerner.github.io/canvg/canvg.js"></script>
 <div id="notapply">
<svg><text x="50" y="50">Not to Apply!</text></svg>
 
   
</div>

<div id="apply">
<svg id="svg1" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
    <svg id="svg2" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

var svgTags = document.querySelectorAll('#apply svg');
for (var i=0; i<svgTags.length; i++) {
	var svgTag = svgTags[i];
	var c = document.createElement('canvas');
	c.width = svgTag.clientWidth;
	c.height = svgTag.clientHeight;
	svgTag.parentNode.insertBefore(c, svgTag);
	svgTag.parentNode.removeChild(svgTag);
	var div = document.createElement('div');
	div.appendChild(svgTag);
	canvg(c, div.innerHTML);
}