scale image by scaling rectangle without group fabric.js

I am new in fabric.js and want to achieve one functionality
I added image and one rectangle same size of image, now I want to scale image while scaling rectangle.
I don’t want to group objects , image should scale by scaling rectangle with previous left, top position of image

below is my code

var imgURL = '';

var canvas = new fabric.Canvas('canvas');
var pug;
var pugImg = new Image();
pugImg.onload = function (img) {    
    pug = new fabric.Image(pugImg, {
        angle: 0,
        width: 500,
        height: 500,
        left: 50,
        top: 70,
        scaleX: .25,
        scaleY: .25,
        selectable: false
    var rect = new fabric.Rect({
      top: 65,
      left: 200,
      width: 150,
      height: 150,
      fill: 'red',
pugImg.src = imgURL; 
canvas.on('object:scaling', function(e) {
  var bounds =;
    width: bounds.width,
    height: bounds.height,
    left: bounds.left
<script src=""></script>
<canvas id="canvas" width=400 height=400></canvas>

32 thoughts on “scale image by scaling rectangle without group fabric.js”

  1. 635973 878757Extremely greatest man toasts, nicely toasts. is directed building your personal by way with the wedding celebration as a result are supposed to try to be witty, amusing and consequently unusual as nicely as. best mans speech 932726