canvas text with img

by jihyng_hd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js"></script>
<canvas id="desktop" style="width: 100px; height: 100px;box-shadow: 2px 2px #ccc;"></canvas>
<button id=thisBtn>
click
</button>

JavaScript

//var canvas = new fabric.Canvas('desktop');
desktop = this.__canvas = new fabric.Canvas('desktop',{selection: false,preserveObjectStacking: true,stateful: true});
desktop.setWidth(300);
desktop.setHeight(300);
var myImg;
// create a rectangle object
var groupClip = new fabric.Group(
	[
  	new fabric.Rect({left:10,top:10,fill:'red',width:60,height:60,}),
    new fabric.Rect({left:70,top:10,fill:'red',width:80,height:80,}),
  ],
  {
  	selectable: false,
    absolutePositioned: true
  }
);


// "add" rectangle onto canvas
desktop.add(groupClip);

fabric.Image.fromURL('https://www.travelbala.com/assets/img/home/home_1_100x50.jpg', function(oImg) {
	oImg.set({
  	hasRotatingPoint: false,
    clipPath: groupClip,
  });
  myImg = oImg;
  desktop.add(myImg);
});

$("#thisBtn").click(function() {
	groupClip.set({
  	left: 100,
  });
  myImg.set({
  	left: 100,
  });
  desktop.renderAll();
});