JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.eyahuska.com/papernew.js"></script>
<div id="data"></div>
<canvas resize="true" id="mycanvas"></canvas>
<script type="text/paperscript" canvas="mycanvas">
var dataURL;
var newImg = new Image(),
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
newImg.src = 'http://comicdrop.s3.amazonaws.com/1392091544514_test.png';
newImg.onload = function() {
canvas.height = newImg.height;
canvas.width = newImg.width;
ctx.drawImage(newImg, 0, 0);
var dataURL = canvas.toDataURL('image/png');
canvas = null;
pass(dataURL);
};
function pass(dataURL) {
console.log(dataURL);
var raster = new Raster(dataURL);
raster.position = view.center;
$('#data').text(dataURL);
}
</script>
JavaScript
/*
var newImg = document.createElement("img");
newImg.setAttribute('src', 'http://comicdrop.s3.amazonaws.com/1392091544514_test.png');
newImg.setAttribute('id', 'mona');
newImg.setAttribute('crossOrigin', 'Anonymous');
document.body.appendChild(newImg);
var raster = new paper.Raster('mona');
*/