Изображение на FabricJS: очень странное поведение

Я пытаюсь добавить изображение на холст и использовать clipTo, чтобы поместить изображение внутри контейнера, чтобы при перетаскивании и изменении размера изображения оно было вырезано в поле.

Скажем, размер холста составляет 1000 пикселей x 1000 пикселей, а изображение расположено на уровне 50,50 и 900 пикселей x 900 пикселей, что позволяет разместить изображение посередине холста. Все в порядке.

Затем мы добавляем clipTo к изображению с точно такими же размерами и положением, и мы ожидали, что клип-бокс будет фактически сидеть там, где мы ему указываем, и будет иметь правильный размер, чтобы все изображение было видимым, пока оно не масштабируется или не перетаскивается, а затем clipped, где установлен прямоугольник clipTop ... но это не так, сам клип всегда оказывается меньше изображения, даже если мы установили размеры на изображении и клипе точно такие же, прямоугольник клипа также заканчивается позиционируется совершенно неправильно.

Версия Fabric: 1.7.16 - эта версия нужна нам для прочего.

Вот демонстрация того, что мы хотим и что на самом деле происходит. Не знаю, неправильно ли я понимаю, как работает клип, или это ошибка.

Первое изображение - это то, что мы ожидаем увидеть, изображение мопса с прямоугольником клипа точно такого же размера и положения, поэтому вы не можете его видеть, затем вы перетаскиваете изображение, и оно исчезает под клипом. Второе изображение - это то, что на самом деле происходит, размер клипа совершенно не соответствует тому, что написано в коде ??

Обозначил клип красным, чтобы вы могли видеть, что он делает.

вот код только для этого примера:

var canvas = new fabric.Canvas('mainc',{
                width:1000,
                height:1000
            });


            var img = new Image();
            img.onload = function(){


                var imgInstance = new fabric.Image(img,{
                    width:900,
                    height:900,
                    top:50,
                    left:50,
                    originX:'left',
                    originY:'top',

                });

                canvas.add(imgInstance);

                imgInstance.clipTo = function(ctx) {
                    ctx.save();
                    ctx.setTransform(1, 0, 0, 1, 0, 0);

                    ctx.rect(50,50,900,900);
                    ctx.fillStyle='red';
                    ctx.fill();
                    ctx.restore();
                };
                canvas.renderAll();

            }
            img.src = 'http://example.com/test/pug.png';

Обновлено:

Добавлен в скрипт JS, но изменил версию фабрики на 1.7.15, и она там работает, но если я использую эту версию фабрики в своей локальной версии, она все равно не работает. https://jsfiddle.net/xpvt214o/54670/

Так чем же отличается js fiddle?

Обновлено еще раз:

Хорошо, это сводит меня с ума, тот же самый код отлично работает на скрипте js, но не локально, локально он все еще отображает прямоугольник клипа неправильного размера и положения: - первое изображение - рабочий пример js, а второе - локально с тем же кодом.

РЕДАКТИРОВАТЬ 3:

Только на экранах сетчатки