JSFiddle - React, Tailwind, and code Playground

by Zegis

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button class="btn image1 stickycard" id="yellstickycard">Add Yell card</button>
<br>
<div id="cardcount">0</div>
<canvas id="c" width="400" height="400"></canvas>

CSS

canvas {
    border-width: 1pz;
    border-style: solid;
    border-color: #000;
}

JavaScript

function onObjectModified(e) {    
	    console.log(e);
        
        alert('Modified object x,y: ' + this.getActiveObject().get('left') + ' ' + this.getActiveObject().get('left') + ' it\'s id is: ' + this.getActiveObject()._objects[0].id);    
          	              
};

$(window).load(function () {
      $('.stickycard').click(function () {
          $('#cardcount').html(function (i, val) {
            return val * 1 + 1;
          });
      });
    
    $(document).ready(function () {
         var element = $('#yellstickycard').attr('id');
         var canvas = new fabric.Canvas('c');
         var cardtype = 'yellcard' ;
        canvas.on('object:modified', onObjectModified); // Moved from callback function of fabric.Image.fromURL now it'll be called only once!
    $('.stickycard').click(function () {
       
        fabric.Image.fromURL('http://s18.postimg.org/z2nyjwoed/yellow_stickycard.png', function(img) {
        
		var yellcard = img.scale(1.0).set({ left: 22, top: 15 }); 
        var cardcount = $('#cardcount').text();
        var id = cardcount;
        var sticky = new fabric.Text('Sticky Card #'+ (cardcount), {
        fontSize: 12,
        cornerSize: 6,
        id: cardcount
            });

          var groupyell = new fabric.Group([ sticky, yellcard ], {
          left: 150,
          top: 100,
          cornerSize: 6
          });
              groupyell.set({
          left: 150,
          top: 150
          
        });  canvas.add(groupyell);       
   
           if(typeof(yellcard) != "undefined" && groupyell !== null) {
                 var cardtype = yellcard ;  
	 
	            canvas.on('object:added', function(e) {    
                 var activeObject = e.target;
                  	  console.log(activeObject.get('left'), activeObject.get('top'));
                
                });
	          //alert(cardtype+' '+id);
           }
          
    
   
//**********When card is moved************	
	
    
 });
       
  });
});
});