JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pica/4.0.2/pica.js"></script>
<button onclick="resize()">resize</button>
<canvas id="dummy-canvas" width="4" height="3" data-src="http://i.imgur.com/w1yg6qo.jpg"></canvas>
JavaScript
var p = new pica();
var canvas = document.getElementById('dummy-canvas');
canvas.width = 0;
canvas.height = 0;
var ctx = canvas.getContext('2d');
window.resize = function() {
var img = new Image();
img.onload = function() {
// ctx.drawImage(this, 0, 0, img.width, img.height) // works
// ctx.drawImage(this, -10, 0, img.width, img.height, 20, 10, 100, 100) // fails in edge
var resize = p.resize(img, canvas);
}
img.src = canvas.getAttribute('data-src');
}