fabric 5.3.0 → 6.0.0-beta1

package/src/mixins/{eraser_brush.mixin.js → eraser_brush.mixin.ts}

@@ -1,16 +1,17 @@
-(function () {
-  /** ERASER_START */
+//@ts-nocheck
+import { Point } from '../Point';
+import { uid } from '../util/internals/uid';
 
-  /**
-   * add `eraser` to enlivened props
-   */
-  fabric.Object.ENLIVEN_PROPS.push('eraser');
+(function (global) {
+  /** ERASER_START */
 
-  var __drawClipPath = fabric.Object.prototype._drawClipPath;
+  var fabric = global.fabric,
+    __drawClipPath = fabric.Object.prototype._drawClipPath;
   var _needsItsOwnCache = fabric.Object.prototype.needsItsOwnCache;
   var _toObject = fabric.Object.prototype.toObject;
   var _getSvgCommons = fabric.Object.prototype.getSvgCommons;
-  var __createBaseClipPathSVGMarkup = fabric.Object.prototype._createBaseClipPathSVGMarkup;
+  var __createBaseClipPathSVGMarkup =
+    fabric.Object.prototype._createBaseClipPathSVGMarkup;
   var __createBaseSVGMarkup = fabric.Object.prototype._createBaseSVGMarkup;
 
   fabric.Object.prototype.cacheProperties.push('eraser');
@@ -58,10 +59,11 @@
       if (this.eraser) {
         //  update eraser size to match instance
         var size = this._getNonTransformedDimensions();
-        this.eraser.isType('eraser') && this.eraser.set({
-          width: size.x,
-          height: size.y
-        });
+        this.eraser.isType('eraser') &&
+          this.eraser.set({
+            width: size.x,
+            height: size.y,
+          });
         __drawClipPath.call(this, ctx, this.eraser);
       }
     },
@@ -72,7 +74,10 @@
      * @return {Object} Object representation of an instance
      */
     toObject: function (propertiesToInclude) {
-      var object = _toObject.call(this, ['erasable'].concat(propertiesToInclude));
+      var object = _toObject.call(
+        this,
+        ['erasable'].concat(propertiesToInclude)
+      );
       if (this.eraser && !this.eraser.excludeFromExport) {
         object.eraser = this.eraser.toObject(propertiesToInclude);
       }
@@ -86,7 +91,10 @@
      * @return {String}
      */
     getSvgCommons: function () {
-      return _getSvgCommons.call(this) + (this.eraser ? 'mask="url(#' + this.eraser.clipPathId + ')" ' : '');
+      return (
+        _getSvgCommons.call(this) +
+        (this.eraser ? 'mask="url(#' + this.eraser.clipPathId + ')" ' : '')
+      );
     },
 
     /**
@@ -98,11 +106,14 @@
      */
     _createEraserSVGMarkup: function (reviver) {
       if (this.eraser) {
-        this.eraser.clipPathId = 'MASK_' + fabric.Object.__uid++;
+        this.eraser.clipPathId = 'MASK_' + uid();
         return [
-          '<mask id="', this.eraser.clipPathId, '" >',
+          '<mask id="',
+          this.eraser.clipPathId,
+          '" >',
           this.eraser.toSVG(reviver),
-          '</mask>', '\n'
+          '</mask>',
+          '\n',
         ].join('');
       }
       return '';
@@ -114,7 +125,7 @@
     _createBaseClipPathSVGMarkup: function (objectMarkup, options) {
       return [
         this._createEraserSVGMarkup(options && options.reviver),
-        __createBaseClipPathSVGMarkup.call(this, objectMarkup, options)
+        __createBaseClipPathSVGMarkup.call(this, objectMarkup, options),
       ].join('');
     },
 
@@ -124,74 +135,73 @@
     _createBaseSVGMarkup: function (objectMarkup, options) {
       return [
         this._createEraserSVGMarkup(options && options.reviver),
-        __createBaseSVGMarkup.call(this, objectMarkup, options)
+        __createBaseSVGMarkup.call(this, objectMarkup, options),
       ].join('');
-    }
+    },
     /* _TO_SVG_END_ */
   });
 
-  var __restoreObjectsState = fabric.Group.prototype._restoreObjectsState;
   fabric.util.object.extend(fabric.Group.prototype, {
     /**
      * @private
      * @param {fabric.Path} path
+     * @returns {Promise<fabric.Path[]>}
      */
     _addEraserPathToObjects: function (path) {
-      this._objects.forEach(function (object) {
-        fabric.EraserBrush.prototype._addPathToObjectEraser.call(
-          fabric.EraserBrush.prototype,
-          object,
-          path
-        );
-      });
+      return Promise.all(
+        this._objects.map(function (object) {
+          return fabric.EraserBrush.prototype._addPathToObjectEraser.call(
+            fabric.EraserBrush.prototype,
+            object,
+            path
+          );
+        })
+      );
     },
 
     /**
      * Applies the group's eraser to its objects
      * @tutorial {@link http://fabricjs.com/erasing#erasable_property}
+     * @returns {Promise<fabric.Path[]|fabric.Path[][]|void>}
      */
     applyEraserToObjects: function () {
-      var _this = this, eraser = this.eraser;
-      if (eraser) {
-        delete this.eraser;
-        var transform = _this.calcTransformMatrix();
-        eraser.clone(function (eraser) {
-          var clipPath = _this.clipPath;
-          eraser.getObjects('path')
-            .forEach(function (path) {
-              //  first we transform the path from the group's coordinate system to the canvas'
-              var originalTransform = fabric.util.multiplyTransformMatrices(
-                transform,
-                path.calcTransformMatrix()
-              );
-              fabric.util.applyTransformToObject(path, originalTransform);
-              if (clipPath) {
-                clipPath.clone(function (_clipPath) {
-                  var eraserPath = fabric.EraserBrush.prototype.applyClipPathToPath.call(
-                    fabric.EraserBrush.prototype,
-                    path,
-                    _clipPath,
-                    transform
-                  );
-                  _this._addEraserPathToObjects(eraserPath);
-                }, ['absolutePositioned', 'inverted']);
-              }
-              else {
-                _this._addEraserPathToObjects(path);
-              }
-            });
-        });
-      }
+      var _this = this,
+        eraser = this.eraser;
+      return Promise.resolve().then(function () {
+        if (eraser) {
+          delete _this.eraser;
+          var transform = _this.calcTransformMatrix();
+          return eraser.clone().then(function (eraser) {
+            var clipPath = _this.clipPath;
+            return Promise.all(
+              eraser.getObjects('path').map(function (path) {
+                //  first we transform the path from the group's coordinate system to the canvas'
+                var originalTransform = fabric.util.multiplyTransformMatrices(
+                  transform,
+                  path.calcTransformMatrix()
+                );
+                fabric.util.applyTransformToObject(path, originalTransform);
+                return clipPath
+                  ? clipPath.clone().then(
+                      function (_clipPath) {
+                        var eraserPath =
+                          fabric.EraserBrush.prototype.applyClipPathToPath.call(
+                            fabric.EraserBrush.prototype,
+                            path,
+                            _clipPath,
+                            transform
+                          );
+                        return _this._addEraserPathToObjects(eraserPath);
+                      },
+                      ['absolutePositioned', 'inverted']
+                    )
+                  : _this._addEraserPathToObjects(path);
+              })
+            );
+          });
+        }
+      });
     },
-
-    /**
-     * Propagate the group's eraser to its objects, crucial for proper functionality of the eraser within the group and nested objects.
-     * @private
-     */
-    _restoreObjectsState: function () {
-      this.erasable === true && this.applyEraserToObjects();
-      return __restoreObjectsState.call(this);
-    }
   });
 
   /**
@@ -218,14 +228,6 @@
      */
     originY: 'center',
 
-    drawObject: function (ctx) {
-      ctx.save();
-      ctx.fillStyle = 'black';
-      ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
-      ctx.restore();
-      this.callSuper('drawObject', ctx);
-    },
-
     /**
      * eraser should retain size
      * dimensions should not change when paths are added or removed
@@ -233,8 +235,14 @@
      * @override
      * @private
      */
-    _getBounds: function () {
-      //  noop
+    layout: 'fixed',
+
+    drawObject: function (ctx) {
+      ctx.save();
+      ctx.fillStyle = 'black';
+      ctx.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
+      ctx.restore();
+      this.callSuper('drawObject', ctx);
     },
 
     /* _TO_SVG_START_ */
@@ -248,12 +256,20 @@
      */
     _toSVG: function (reviver) {
       var svgString = ['<g ', 'COMMON_PARTS', ' >\n'];
-      var x = -this.width / 2, y = -this.height / 2;
+      var x = -this.width / 2,
+        y = -this.height / 2;
       var rectSvg = [
-        '<rect ', 'fill="white" ',
-        'x="', x, '" y="', y,
-        '" width="', this.width, '" height="', this.height,
-        '" />\n'
+        '<rect ',
+        'fill="white" ',
+        'x="',
+        x,
+        '" y="',
+        y,
+        '" width="',
+        this.width,
+        '" height="',
+        this.height,
+        '" />\n',
       ].join('');
       svgString.push('\t\t', rectSvg);
       for (var i = 0, len = this._objects.length; i < len; i++) {
@@ -266,20 +282,25 @@
   });
 
   /**
-   * Returns {@link fabric.Eraser} instance from an object representation
+   * Returns instance from an object representation
    * @static
    * @memberOf fabric.Eraser
    * @param {Object} object Object to create an Eraser from
-   * @param {Function} [callback] Callback to invoke when an eraser instance is created
+   * @returns {Promise<fabric.Eraser>}
    */
-  fabric.Eraser.fromObject = function (object, callback) {
-    var objects = object.objects;
-    fabric.util.enlivenObjects(objects, function (enlivenedObjects) {
-      var options = fabric.util.object.clone(object, true);
-      delete options.objects;
-      fabric.util.enlivenObjectEnlivables(object, options, function () {
-        callback && callback(new fabric.Eraser(enlivenedObjects, options, true));
-      });
+  fabric.Eraser.fromObject = function (object) {
+    var objects = object.objects || [],
+      options = fabric.util.object.clone(object, true);
+    delete options.objects;
+    return Promise.all([
+      fabric.util.enlivenObjects(objects),
+      fabric.util.enlivenObjectEnlivables(options),
+    ]).then(function (enlivedProps) {
+      return new fabric.Eraser(
+        enlivedProps[0],
+        Object.assign(options, enlivedProps[1]),
+        true
+      );
     });
   };
 
@@ -309,10 +330,8 @@
      */
     _renderOverlay: function (ctx) {
       __renderOverlay.call(this, ctx);
-      if (this.isErasing() && !this.freeDrawingBrush.inverted) {
-        this.freeDrawingBrush._render();
-      }
-    }
+      this.isErasing() && this.freeDrawingBrush._render();
+    },
   });
 
   /**
@@ -341,9 +360,17 @@
 
       /**
        * When set to `true` the brush will create a visual effect of undoing erasing
+       * @type boolean
        */
       inverted: false,
 
+      /**
+       * Used to fix https://github.com/fabricjs/fabric.js/issues/7984
+       * Reduces the path width while clipping the main context, resulting in a better visual overlap of both contexts
+       * @type number
+       */
+      erasingWidthAliasing: 4,
+
       /**
        * @private
        */
@@ -361,60 +388,73 @@
 
       /**
        * @private
-       * This is designed to support erasing a collection with both erasable and non-erasable objects.
-       * Iterates over collections to allow nested selective erasing.
-       * Prepares the pattern brush that will draw on the top context to achieve the desired visual effect.
-       * If brush is **NOT** inverted render all non-erasable objects.
-       * If brush is inverted render all erasable objects that have been erased with their clip path inverted.
-       * This will render the erased parts as if they were not erased.
+       * This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\
+       * Iterates over collections to allow nested selective erasing.\
+       * Prepares objects before rendering the pattern brush.\
+       * If brush is **NOT** inverted render all non-erasable objects.\
+       * If brush is inverted render all objects, erasable objects without their eraser.
+       * This will render the erased parts as if they were not erased in the first place, achieving an undo effect.
        *
        * @param {fabric.Collection} collection
+       * @param {fabric.Object[]} objects
        * @param {CanvasRenderingContext2D} ctx
        * @param {{ visibility: fabric.Object[], eraser: fabric.Object[], collection: fabric.Object[] }} restorationContext
        */
-      _prepareCollectionTraversal: function (collection, ctx, restorationContext) {
-        collection.forEachObject(function (obj) {
+      _prepareCollectionTraversal: function (
+        collection,
+        objects,
+        ctx,
+        restorationContext
+      ) {
+        objects.forEach(function (obj) {
+          var dirty = false;
           if (obj.forEachObject && obj.erasable === 'deep') {
             //  traverse
-            this._prepareCollectionTraversal(obj, ctx, restorationContext);
-          }
-          else if (!this.inverted && obj.erasable && obj.visible) {
+            this._prepareCollectionTraversal(
+              obj,
+              obj._objects,
+              ctx,
+              restorationContext
+            );
+          } else if (!this.inverted && obj.erasable && obj.visible) {
             //  render only non-erasable objects
             obj.visible = false;
-            collection.dirty = true;
             restorationContext.visibility.push(obj);
-            restorationContext.collection.push(collection);
+            dirty = true;
+          } else if (
+            this.inverted &&
+            obj.erasable &&
+            obj.eraser &&
+            obj.visible
+          ) {
+            //  render all objects without eraser
+            var eraser = obj.eraser;
+            obj.eraser = undefined;
+            obj.dirty = true;
+            restorationContext.eraser.push([obj, eraser]);
+            dirty = true;
           }
-          else if (this.inverted && obj.visible) {
-            //  render only erasable objects that were erased
-            if (obj.erasable && obj.eraser) {
-              obj.eraser.inverted = true;
-              obj.dirty = true;
-              collection.dirty = true;
-              restorationContext.eraser.push(obj);
-              restorationContext.collection.push(collection);
-            }
-            else {
-              obj.visible = false;
-              collection.dirty = true;
-              restorationContext.visibility.push(obj);
-              restorationContext.collection.push(collection);
-            }
+          if (dirty && collection instanceof fabric.Object) {
+            collection.dirty = true;
+            restorationContext.collection.push(collection);
           }
         }, this);
       },
 
       /**
        * Prepare the pattern for the erasing brush
-       * This pattern will be drawn on the top context, achieving a visual effect of erasing only erasable objects
-       * @todo decide how overlay color should behave when `inverted === true`, currently draws over it which is undesirable
+       * This pattern will be drawn on the top context after clipping the main context,
+       * achieving a visual effect of erasing only erasable objects
        * @private
+       * @param {fabric.Object[]} [objects]  override default behavior by passing objects to render on pattern
        */
-      preparePattern: function () {
+      preparePattern: function (objects) {
         if (!this._patternCanvas) {
           this._patternCanvas = fabric.util.createCanvasElement();
         }
         var canvas = this._patternCanvas;
+        objects =
+          objects || this.canvas._objectsToRender || this.canvas._objects;
         canvas.width = this.canvas.width;
         canvas.height = this.canvas.height;
         var patternCtx = canvas.getContext('2d');
@@ -423,42 +463,77 @@
           this.canvas.__initRetinaScaling(retinaScaling, canvas, patternCtx);
         }
         var backgroundImage = this.canvas.backgroundImage,
-            bgErasable = backgroundImage && this._isErasable(backgroundImage),
-            overlayImage = this.canvas.overlayImage,
-            overlayErasable = overlayImage && this._isErasable(overlayImage);
-        if (!this.inverted && ((backgroundImage && !bgErasable) || !!this.canvas.backgroundColor)) {
-          if (bgErasable) { this.canvas.backgroundImage = undefined; }
+          bgErasable = backgroundImage && this._isErasable(backgroundImage),
+          overlayImage = this.canvas.overlayImage,
+          overlayErasable = overlayImage && this._isErasable(overlayImage);
+        if (
+          !this.inverted &&
+          ((backgroundImage && !bgErasable) || !!this.canvas.backgroundColor)
+        ) {
+          if (bgErasable) {
+            this.canvas.backgroundImage = undefined;
+          }
           this.canvas._renderBackground(patternCtx);
-          if (bgErasable) { this.canvas.backgroundImage = backgroundImage; }
-        }
-        else if (this.inverted && (backgroundImage && bgErasable)) {
-          var color = this.canvas.backgroundColor;
-          this.canvas.backgroundColor = undefined;
+          if (bgErasable) {
+            this.canvas.backgroundImage = backgroundImage;
+          }
+        } else if (this.inverted) {
+          var eraser = backgroundImage && backgroundImage.eraser;
+          if (eraser) {
+            backgroundImage.eraser = undefined;
+            backgroundImage.dirty = true;
+          }
           this.canvas._renderBackground(patternCtx);
-          this.canvas.backgroundColor = color;
+          if (eraser) {
+            backgroundImage.eraser = eraser;
+            backgroundImage.dirty = true;
+          }
         }
         patternCtx.save();
         patternCtx.transform.apply(patternCtx, this.canvas.viewportTransform);
         var restorationContext = { visibility: [], eraser: [], collection: [] };
-        this._prepareCollectionTraversal(this.canvas, patternCtx, restorationContext);
-        this.canvas._renderObjects(patternCtx, this.canvas._objects);
-        restorationContext.visibility.forEach(function (obj) { obj.visible = true; });
-        restorationContext.eraser.forEach(function (obj) {
-          obj.eraser.inverted = false;
+        this._prepareCollectionTraversal(
+          this.canvas,
+          objects,
+          patternCtx,
+          restorationContext
+        );
+        this.canvas._renderObjects(patternCtx, objects);
+        restorationContext.visibility.forEach(function (obj) {
+          obj.visible = true;
+        });
+        restorationContext.eraser.forEach(function (entry) {
+          var obj = entry[0],
+            eraser = entry[1];
+          obj.eraser = eraser;
+          obj.dirty = true;
+        });
+        restorationContext.collection.forEach(function (obj) {
           obj.dirty = true;
         });
-        restorationContext.collection.forEach(function (obj) { obj.dirty = true; });
         patternCtx.restore();
-        if (!this.inverted && ((overlayImage && !overlayErasable) || !!this.canvas.overlayColor)) {
-          if (overlayErasable) { this.canvas.overlayImage = undefined; }
+        if (
+          !this.inverted &&
+          ((overlayImage && !overlayErasable) || !!this.canvas.overlayColor)
+        ) {
+          if (overlayErasable) {
+            this.canvas.overlayImage = undefined;
+          }
           __renderOverlay.call(this.canvas, patternCtx);
-          if (overlayErasable) { this.canvas.overlayImage = overlayImage; }
-        }
-        else if (this.inverted && (overlayImage && overlayErasable)) {
-          var color = this.canvas.overlayColor;
-          this.canvas.overlayColor = undefined;
+          if (overlayErasable) {
+            this.canvas.overlayImage = overlayImage;
+          }
+        } else if (this.inverted) {
+          var eraser = overlayImage && overlayImage.eraser;
+          if (eraser) {
+            overlayImage.eraser = undefined;
+            overlayImage.dirty = true;
+          }
           __renderOverlay.call(this.canvas, patternCtx);
-          this.canvas.overlayColor = color;
+          if (eraser) {
+            overlayImage.eraser = eraser;
+            overlayImage.dirty = true;
+          }
         }
       },
 
@@ -489,7 +564,10 @@
       _saveAndTransform: function (ctx) {
         this.callSuper('_saveAndTransform', ctx);
         this._setBrushStyles(ctx);
-        ctx.globalCompositeOperation = ctx === this.canvas.getContext() ? 'destination-out' : 'source-over';
+        ctx.globalCompositeOperation =
+          ctx === this.canvas.getContext()
+            ? 'destination-out'
+            : 'destination-in';
       },
 
       /**
@@ -502,7 +580,7 @@
 
       /**
        *
-       * @param {fabric.Point} pointer
+       * @param {Point} pointer
        * @param {fabric.IEvent} options
        * @returns
        */
@@ -527,24 +605,30 @@
        * 1. Use brush to clip canvas by rendering it on top of canvas (unnecessary if `inverted === true`)
        * 2. Render brush with canvas pattern on top context
        *
+       * @todo provide a better solution to https://github.com/fabricjs/fabric.js/issues/7984
        */
       _render: function () {
-        var ctx;
-        if (!this.inverted) {
-          //  clip canvas
-          ctx = this.canvas.getContext();
+        var ctx,
+          lineWidth = this.width;
+        var t = this.canvas.getRetinaScaling(),
+          s = 1 / t;
+        //  clip canvas
+        ctx = this.canvas.getContext();
+        //  a hack that fixes https://github.com/fabricjs/fabric.js/issues/7984 by reducing path width
+        //  the issue's cause is unknown at time of writing (@ShaMan123 06/2022)
+        if (lineWidth - this.erasingWidthAliasing > 0) {
+          this.width = lineWidth - this.erasingWidthAliasing;
           this.callSuper('_render', ctx);
+          this.width = lineWidth;
         }
-        //  render brush and mask it with image of non erasables
+        //  render brush and mask it with pattern
         ctx = this.canvas.contextTop;
         this.canvas.clearContext(ctx);
-        this.callSuper('_render', ctx);
         ctx.save();
-        var t = this.canvas.getRetinaScaling(), s = 1 / t;
         ctx.scale(s, s);
-        ctx.globalCompositeOperation = 'source-in';
         ctx.drawImage(this._patternCanvas, 0, 0);
         ctx.restore();
+        this.callSuper('_render', ctx);
       },
 
       /**
@@ -557,7 +641,9 @@
        */
       createPath: function (pathData) {
         var path = this.callSuper('createPath', pathData);
-        path.globalCompositeOperation = this.inverted ? 'source-over' : 'destination-out';
+        path.globalCompositeOperation = this.inverted
+          ? 'source-over'
+          : 'destination-out';
         path.stroke = this.inverted ? 'white' : 'black';
         return path;
       },
@@ -571,12 +657,18 @@
        * @param {number[]} clipPathContainerTransformMatrix The transform matrix of the object that the clip path belongs to
        * @returns {fabric.Path} path with clip path
        */
-      applyClipPathToPath: function (path, clipPath, clipPathContainerTransformMatrix) {
-        var pathInvTransform = fabric.util.invertTransform(path.calcTransformMatrix()),
-            clipPathTransform = clipPath.calcTransformMatrix(),
-            transform = clipPath.absolutePositioned ?
-              pathInvTransform :
-              fabric.util.multiplyTransformMatrices(
+      applyClipPathToPath: function (
+        path,
+        clipPath,
+        clipPathContainerTransformMatrix
+      ) {
+        var pathInvTransform = fabric.util.invertTransform(
+            path.calcTransformMatrix()
+          ),
+          clipPathTransform = clipPath.calcTransformMatrix(),
+          transform = clipPath.absolutePositioned
+            ? pathInvTransform
+            : fabric.util.multiplyTransformMatrices(
                 pathInvTransform,
                 clipPathContainerTransformMatrix
               );
@@ -585,16 +677,15 @@
         clipPath.absolutePositioned = false;
         fabric.util.applyTransformToObject(
           clipPath,
-          fabric.util.multiplyTransformMatrices(
-            transform,
-            clipPathTransform
-          )
+          fabric.util.multiplyTransformMatrices(transform, clipPathTransform)
         );
         //  We need to clip `path` with both `clipPath` and it's own clip path if existing (`path.clipPath`)
         //  so in turn `path` erases an object only where it overlaps with all it's clip paths, regardless of how many there are.
         //  this is done because both clip paths may have nested clip paths of their own (this method walks down a collection => this may reccur),
         //  so we can't assign one to the other's clip path property.
-        path.clipPath = path.clipPath ? fabric.util.mergeClipPaths(clipPath, path.clipPath) : clipPath;
+        path.clipPath = path.clipPath
+          ? fabric.util.mergeClipPaths(clipPath, path.clipPath)
+          : clipPath;
         return path;
       },
 
@@ -604,27 +695,31 @@
        * Called when a group has a clip path that should be applied to the path before applying erasing on the group's objects.
        * @param {fabric.Path} path The eraser path
        * @param {fabric.Object} object The clipPath to apply to path belongs to object
-       * @param {Function} callback Callback to be invoked with the cloned path after applying the clip path
+       * @returns {Promise<fabric.Path>}
        */
-      clonePathWithClipPath: function (path, object, callback) {
+      clonePathWithClipPath: function (path, object) {
         var objTransform = object.calcTransformMatrix();
         var clipPath = object.clipPath;
         var _this = this;
-        path.clone(function (_path) {
-          clipPath.clone(function (_clipPath) {
-            callback(_this.applyClipPathToPath(_path, _clipPath, objTransform));
-          }, ['absolutePositioned', 'inverted']);
+        return Promise.all([
+          path.clone(),
+          clipPath.clone(['absolutePositioned', 'inverted']),
+        ]).then(function (clones) {
+          return _this.applyClipPathToPath(clones[0], clones[1], objTransform);
         });
       },
 
       /**
        * Adds path to object's eraser, walks down object's descendants if necessary
        *
+       * @public
        * @fires erasing:end on object
        * @param {fabric.Object} obj
        * @param {fabric.Path} path
+       * @param {Object} [context] context to assign erased objects to
+       * @returns {Promise<fabric.Path | fabric.Path[]>}
        */
-      _addPathToObjectEraser: function (obj, path) {
+      _addPathToObjectEraser: function (obj, path, context) {
         var _this = this;
         //  object is collection, i.e group
         if (obj.forEachObject && obj.erasable === 'deep') {
@@ -632,16 +727,19 @@
             return _obj.erasable;
           });
           if (targets.length > 0 && obj.clipPath) {
-            this.clonePathWithClipPath(path, obj, function (_path) {
-              targets.forEach(function (_obj) {
-                _this._addPathToObjectEraser(_obj, _path);
-              });
-            });
-          }
-          else if (targets.length > 0) {
-            targets.forEach(function (_obj) {
-              _this._addPathToObjectEraser(_obj, path);
+            return this.clonePathWithClipPath(path, obj).then(function (_path) {
+              return Promise.all(
+                targets.map(function (_obj) {
+                  return _this._addPathToObjectEraser(_obj, _path, context);
+                })
+              );
             });
+          } else if (targets.length > 0) {
+            return Promise.all(
+              targets.map(function (_obj) {
+                return _this._addPathToObjectEraser(_obj, path, context);
+              })
+            );
           }
           return;
         }
@@ -652,23 +750,23 @@
           obj.eraser = eraser;
         }
         //  clone and add path
-        path.clone(function (path) {
+        return path.clone().then(function (path) {
           // http://fabricjs.com/using-transformations
           var desiredTransform = fabric.util.multiplyTransformMatrices(
-            fabric.util.invertTransform(
-              obj.calcTransformMatrix()
-            ),
+            fabric.util.invertTransform(obj.calcTransformMatrix()),
             path.calcTransformMatrix()
           );
           fabric.util.applyTransformToObject(path, desiredTransform);
-          eraser.addWithUpdate(path);
+          eraser.add(path);
           obj.set('dirty', true);
           obj.fire('erasing:end', {
-            path: path
+            path: path,
           });
-          if (obj.group && Array.isArray(_this.__subTargets)) {
-            _this.__subTargets.push(obj);
+          if (context) {
+            (obj.group ? context.subTargets : context.targets).push(obj);
+            //context.paths.set(obj, path);
           }
+          return path;
         });
       },
 
@@ -677,22 +775,27 @@
        *
        * @param {fabric.Canvas} source
        * @param {fabric.Canvas} path
-       * @returns {Object} canvas drawables that were erased by the path
+       * @param {Object} [context] context to assign erased objects to
+       * @returns {Promise<fabric.Path[]|void>} eraser paths
        */
-      applyEraserToCanvas: function (path) {
+      applyEraserToCanvas: function (path, context) {
         var canvas = this.canvas;
-        var drawables = {};
-        [
-          'backgroundImage',
-          'overlayImage',
-        ].forEach(function (prop) {
-          var drawable = canvas[prop];
-          if (drawable && drawable.erasable) {
-            this._addPathToObjectEraser(drawable, path);
-            drawables[prop] = drawable;
-          }
-        }, this);
-        return drawables;
+        return Promise.all(
+          ['backgroundImage', 'overlayImage'].map(function (prop) {
+            var drawable = canvas[prop];
+            return (
+              drawable &&
+              drawable.erasable &&
+              this._addPathToObjectEraser(drawable, path).then(function (path) {
+                if (context) {
+                  context.drawables[prop] = drawable;
+                  //context.paths.set(drawable, path);
+                }
+                return path;
+              })
+            );
+          }, this)
+        );
       },
 
       /**
@@ -701,7 +804,8 @@
        * and add it to every intersected erasable object.
        */
       _finalizeAndAddPath: function () {
-        var ctx = this.canvas.contextTop, canvas = this.canvas;
+        var ctx = this.canvas.contextTop,
+          canvas = this.canvas;
         ctx.closePath();
         if (this.decimate) {
           this._points = this.decimatePoints(this._points, this.decimate);
@@ -711,9 +815,10 @@
         canvas.clearContext(canvas.contextTop);
         this._isErasing = false;
 
-        var pathData = this._points && this._points.length > 1 ?
-          this.convertPointsToSVGPath(this._points) :
-          null;
+        var pathData =
+          this._points && this._points.length > 1
+            ? this.convertPointsToSVGPath(this._points)
+            : null;
         if (!pathData || this._isEmptySVGPath(pathData)) {
           canvas.fire('erasing:end');
           // do not create 0 width/height paths, as they are
@@ -731,33 +836,39 @@
         canvas.fire('before:path:created', { path: path });
 
         // finalize erasing
-        var drawables = this.applyEraserToCanvas(path);
         var _this = this;
-        this.__subTargets = [];
-        var targets = [];
-        canvas.forEachObject(function (obj) {
-          if (obj.erasable && obj.intersectsWithObject(path, true, true)) {
-            _this._addPathToObjectEraser(obj, path);
-            targets.push(obj);
-          }
-        });
-        //  fire erasing:end
-        canvas.fire('erasing:end', {
-          path: path,
-          targets: targets,
-          subTargets: this.__subTargets,
-          drawables: drawables
+        var context = {
+          targets: [],
+          subTargets: [],
+          //paths: new Map(),
+          drawables: {},
+        };
+        var tasks = canvas._objects.map(function (obj) {
+          return (
+            obj.erasable &&
+            obj.intersectsWithObject(path, true, true) &&
+            _this._addPathToObjectEraser(obj, path, context)
+          );
         });
-        delete this.__subTargets;
+        tasks.push(_this.applyEraserToCanvas(path, context));
+        return Promise.all(tasks).then(function () {
+          //  fire erasing:end
+          canvas.fire(
+            'erasing:end',
+            Object.assign(context, {
+              path: path,
+            })
+          );
 
-        canvas.requestRenderAll();
-        this._resetShadow();
+          canvas.requestRenderAll();
+          _this._resetShadow();
 
-        // fire event 'path' created
-        canvas.fire('path:created', { path: path });
-      }
+          // fire event 'path' created
+          canvas.fire('path:created', { path: path });
+        });
+      },
     }
   );
 
   /** ERASER_END */
-})();
+})(typeof exports !== 'undefined' ? exports : window);