Pixi bunny with mouse offset w/o texture load
HTML
<script src="http://www.goodboydigital.com/pixijs/examples/8/pixi.js"></script>
CSS
margin: 0;
padding: 0;
background-color: #000000;
JavaScript
var stage = new PIXI.Stage(0x97c56e, true);
var renderer = new PIXI.CanvasRenderer(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame(animate);
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'I HATE ' +
'<span style="color:orange;">' +
'FIREFOX</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var html = '<div style="font-size:40px">' +
'I HATE ' +
'<span style="color:orange;">' +
'FIREFOX</span>' +
'</div>';
var data1 = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
var serializer = new XMLSerializer();
doc.head.innerHTML = '<style>span {} body {padding:0; margin:0; font-size: 14px;} svg{ font-kerning: normal; }</style>';
html = serializer.serializeToString(doc);
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">' +
'<foreignObject width="100%" height="100%">'
+ html +
'</foreignObject>' +
'</svg>';
var url = "data:image/svg+xml," + encodeURIComponent(svg);
console.log(url);
var image = new Image();
image.src = url;
//var DOMURL = window.URL || window.webkitURL || window;
//var svg = new Blob([data1], {type: 'image/svg+xml;charset=utf-8'});
//var url =...