JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="canvas1" style="width:300px;height:300px;"></canvas>
<canvas id="canvas2" style="width:300px;height:300px;"></canvas>

JavaScript

$(document).ready(function() {
    
    var canvases = {
        canvas1 : new fabric.Canvas('canvas1', {backgroundColor: 'red'}),
        canvas2 : new fabric.Canvas('canvas2', {backgroundColor: 'blue'})
    };
                  
    var text = new fabric.Text('Hello world!', { left: 0,
            top : 0,
            fontSize: 30,
            fontFamily: 'Arial',
            fill: 'black',
            textAlign: 'left',
            hasControls: true,
            lockUniScaling: true,
            borderColor: '#fff',
            cornerColor: '#fff' 
    });
    
    var activeObject, initialCanvas;
    
    canvases.canvas1.add(text);
    
    canvases.canvas1.on('mouse:down', function() {
        if(this.getActiveObject()) {
            activeObject  = $.extend({}, this.getActiveObject());
            initialCanvas = this.lowerCanvasEl.id;
        }
    });
    
    $(document).on('mouseup', function(evt) {
        if(evt.target.localName === 'canvas' && initialCanvas) {
            canvasId = $(evt.target).siblings().attr('id');
            if(canvasId !== initialCanvas) {
                canvases[canvasId].add(activeObject);
                canvases[canvasId].renderAll();
            }
        }
        initialCanvas = '';
        activeObject  = {};                 
    });    
});