fix(fabric.Image): rendering pixel outside canvas size

src/shapes/image.class.js

@@ -539,14 +539,22 @@
       if (!elementToDraw) {
         return;
       }
-      var w = this.width, h = this.height,
-          sW = Math.min(elementToDraw.naturalWidth || elementToDraw.width, w * this._filterScalingX),
-          sH = Math.min(elementToDraw.naturalHeight || elementToDraw.height, h * this._filterScalingY),
+      var scaleX = this._filterScalingX, scaleY = this._filterScalingY,
+          w = this.width, h = this.height, min = Math.min, max = Math.max,
+          // crop values cannot be lesser than 0.
+          cropX = max(this.cropX, 0), cropY = max(this.cropY, 0),
+          elWidth = elementToDraw.naturalWidth || elementToDraw.width,
+          elHeight = elementToDraw.naturalHeight || elementToDraw.height,
+          sX = cropX * scaleX,
+          sY = cropY * scaleY,
+          // the width height cannot exceed element width/height, starting from the crop offset.
+          sW = min(w * scaleX, elWidth - sX),
+          sH = min(h * scaleY, elHeight - sY),
           x = -w / 2, y = -h / 2,
-          sX = Math.max(0, this.cropX * this._filterScalingX),
-          sY = Math.max(0, this.cropY * this._filterScalingY);
+          maxDestW = min(w, elWidth / scaleX - cropX),
+          maxDestH = min(h, elHeight / scaleX - cropY);
 
-      elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, w, h);
+      elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH);
     },
 
     /**

test/unit/image.js

@@ -874,7 +874,7 @@
     });
   });
 
-  QUnit.test('_renderFill respects source boundaries ', function (assert) {
+  QUnit.test('_renderFill respects source boundaries crop < 0 and width > elWidth', function (assert) {
     fabric.Image.prototype._renderFill.call({
       cropX: -1,
       cropY: -1,
@@ -895,4 +895,26 @@
       }
     });
   });
+
+  QUnit.test('_renderFill respects source boundaries crop < 0 and width > elWidth', function (assert) {
+    fabric.Image.prototype._renderFill.call({
+      cropX: 30,
+      cropY: 30,
+      _filterScalingX: 0.5,
+      _filterScalingY: 0.5,
+      width: 210,
+      height: 210,
+      _element: {
+        naturalWidth: 200,
+        height: 200,
+      },
+    }, {
+      drawImage: function(src, sX, sY, sW, sH) {
+        assert.ok(sX === 15, 'sX should be cropX * filterScalingX');
+        assert.ok(sY === 15, 'sY should be cropY * filterScalingY');
+        assert.ok(sW === 105, 'sW will be width * filterScalingX if is < of element width');
+        assert.ok(sH === 105, 'sH will be height * filterScalingY if is < of element height');
+      }
+    });
+  });
 })();