JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<canvas id="test" width="2000" height="2000"></canvas>

CSS

#test {
    border 1px solid red;
}

JavaScript

//var ctx = document.getElementById('test').getContext('2d');
//ctx.drawSvg('<svg><rect x="0" y="0" width="100" height="100" fill="red" /></svg>', 0 , 0 , 500, 500);

var svgImage = '<svg><rect x="0" y="0" width="100" height="100" fill="red" /></svg>';
var spriteImageEinzelUrl = "https://dl.dropboxusercontent.com/u/47067729/Tiger.svg";
 //    "https://dl.dropboxusercontent.com/u/47067729/rechteck.svg";
var spriteImageUrl = "https://dl.dropboxusercontent.com/u/47067729/spriteSailboat.svg";



var image = new Image();
image.onload = function () {
    start();
}
image.src = spriteImageEinzelUrl;


function start() {
    var start = new Date().getTime();

    var successCallback = function () {
        var end = new Date().getTime();
        var time = end - start;
        alert('Execution time: ' + time + "ms");
    }


    canvg("test", spriteImageEinzelUrl, {
        ignoreMouse: true,
        ignoreAnimation: true,
        useCORS: true,
        renderCallback: function () {
            successCallback();
        }
    });

}