FabricJs drag and drop image between canvases

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<div class="canvas-wrapper">
    <canvas id="c0"></canvas>
    <canvas id="c1"></canvas>
</div>
<div id="left-pane-text"  class="pane-text">Canvas #1</div>
<div id="right-pane-text" class="pane-text">Canvas #2</div>

CSS

body {
    padding: 0;
    margin: 0;
    font-family: consolas;
    font-size: 12px;
}

.canvas-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.canvas-container {
    float: left;
}

#c0 {
    width: calc(50% - 2px);
    border-right: 2px dashed darkgray;
}

#c1 {
    width: calc(50% - 2px);
}

.pane-text {
    position: fixed;
    top: 12px;
    width: 45%;
    text-align: center;
    font-size: 14pt;
}
#left-pane-text {
    left: 0;
}
#right-pane-text {
    right: 0;
}

JavaScript

//create two canvases
var canvas0El = document.getElementById("c0");
canvas0El.width = canvas0El.offsetWidth;
canvas0El.height = canvas0El.parentElement.offsetHeight;

var canvas1El = document.getElementById("c1");
canvas1El.width = canvas1El.offsetWidth;
canvas1El.height = canvas1El.parentElement.offsetHeight;

var canvas0 = new fabric.Canvas('c0');
canvas0.setBackgroundColor('rgba(19, 19, 19, 0.25)');
canvas0.renderAll();

var canvas1 = new fabric.Canvas('c1');
canvas1.setBackgroundColor('rgba(92, 18, 18, 0.25)');
canvas1.renderAll();

// add loaded image on left canvas
var onImageLoaded = function(oImg) {
    oImg.originX = "center";
    oImg.originY = "center";

    oImg.left = this.x;
    oImg.top = this.y;

    canvas0.add(oImg);
    oImg.canvas = canvas0;
    imgArrow = oImg;
};

var config = { crossOrigin: 'anonymous' };

var baseUrl = "http://mbnsay.com/rayys/images";
var url0 = baseUrl + "/arrow-right-green.png";
var url1 = baseUrl + "/arrow-right-icon.png";
var url2 = baseUrl + "/arrow-right-blue.png";

// load some images
fabric.Image.fromURL(url0, onImageLoaded.bind({ x: 56,  y: 96 }), config);
fabric.Image.fromURL(url0, onImageLoaded.bind({ x: 156, y: 96 }), config);

fabric.Image.fromURL(url1, onImageLoaded.bind({ x: 56,  y: 2*96 }), config);
fabric.Image.fromURL(url1, onImageLoaded.bind({ x: 156, y: 2*96 }), config);

fabric.Image.fromURL(url2, onImageLoaded.bind({ x: 56,  y: 3*96 }), config);
fabric.Image.fromURL(url2, onImageLoaded.bind({ x: 156, y: 3*96 }), config);

// get ready to handle touch events
var isTouchDevice = false;
window.addEventListener("touchstart", function() {
    isTouchDevice = true;
});

var migrateItem = function(fromCanvas, toCanvas, pendingImage) {
    fromCanvas.remove(pendingImage);

    var pendingTransform = fromCanvas._currentTransform;
    fromCanvas._currentTransform = null;

    var removeListener = fabric.util.removeListener;
    var addListener = fabric.util.addListener; 
    {
       ...