JSFiddle - React, Tailwind, and code Playground

by franknstayn

HTML

<script src="http://test.private-shirt.com//templates/default/js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<button onclick="changeView(1);">View 1</button>
<button onclick="changeView(2);">View 2</button>
<button onclick="dropText();">Drop Text</button>
<div style="text-align: center">
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
</div>

CSS

canvas {
  border: 1px solid red;
}

JavaScript

var activeCanvas, canvas1, canvas2;

$(document).ready(function() {
    canvas1 = new fabric.Canvas('canvas1');
    
    canvas2 = new fabric.Canvas('canvas2');
   
    changeView(1);
});

function changeView(value) {
    if (value == 1) {
        activeCanvas = canvas1;
         activeCanvas.on('object:selected', onSelected);
        $('#canvas1').parent().css('display', 'block');

        $('#canvas2').parent().css('display', 'none');
    }

    if (value == 2) {
        activeCanvas = canvas2;
         activeCanvas.on('object:selected', onSelected);
        $('#canvas1').parent().css('display', 'none');

        $('#canvas2').parent().css('display', 'block');
    }
}

function dropText() {
    var text = new fabric.Text('test');
    
    activeCanvas.add(text);
}

function onSelected(){

  var obj = activeCanvas.getActiveObject();
	console.log(obj);
}