Как масштабировать область ClipTo в FabricJS?

Question

У меня есть прямоугольник для создания области просмотра изображения с использованием ClipPath, и я хочу масштабировать область внутри clipTo of Image, когда пользователь масштабирует прямоугольник наложения, чтобы создать маску.

Ожидаемый результат, как это видео:

Вот мой код:

var canvas;

var canvasObject = document.getElementById("editorCanvas");

// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var newImage = new fabric.Image();
canvas.add(newImage);

newImage.setSrc('https://futushigame.firebaseapp.com/photo-small.jpg', function(img) {

  img.top = 50;
  img.left = 50;
  img.selectable = false;

  var rect = new fabric.Rect({
    width: img.width * 0.5,
    height: img.height * 0.5,
    left: img.left + 10,
    top: img.top + 10,
    // fill: 'transparent'
    fill: 'blue',
    opacity: 0.2,
    lockMovementX: true,
    lockMovementY: true
  });
  rect.setControlsVisibility({
    mb: false,
    ml: false,
    mr: false,
    mt: false
  });

  canvas.add(rect);

  img.clipTo = function(ctx) {
    img.scaleX = rect.scaleX;
    img.scaleY = rect.scaleY;

    var rectWidth = rect.width;
    var rectHeight = rect.height;

    var localPoint = img.toLocalPoint(new fabric.Point(rect.left, rect.top));
    ctx.rect(-img.width / 2 + localPoint.x, -img.height / 2 + localPoint.y, rectWidth, rectHeight);
  }

  rect.on('scaling', objectScale);
  // rect.on('moving', objectMoving);

  img.set('dirty', true);
  canvas.renderAll();
  setObjectCoords();

});

setObjectCoords();

function objectScale(otp) {
  if (otp.transform.action == "scale") {

  }
  console.log('scaling' + otp);
}

function setObjectCoords() {
  canvas.forEachObject(function(object) {
    object.setCoords();
  });
}

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

Спасибо!

clipTo: функция
Функция, которая определяет отсечение объекта (контекст передается в качестве первого аргумента). Если вы используете минимизацию кода, аргумент ctx может быть минимизирован / искажен, вы должны использовать в качестве обходного пути var ctx = arguments[0]; в функции; Обратите внимание, что начало контекста находится в центральной точке объекта (не в левом верхнем углу)