[IOS clipPath] When adding an object's clippath to canvas and drag it several times, get "Total canvas memory use exceed the maximum limit" error. However, if do not add the object's clippath to the canvas, work normally.

[SooChang-Lee]

Version

2.4.6~2.7.0

Test Case

Getting memory error
http://etc.soochang.pe.kr/iphone_test_clippath_added.html
Working fine
http://etc.soochang.pe.kr/iphone_test.html

Information about environment

Nodejs or browser?
browser

Which browsers?
iOS(12.1.4) safari, chrome, firefox(iPhone 6, iPhone X) - error
Android chrome(Galaxy note fe, Galaxy s6). - fine

The object's clippath works whether it is added to the canvas or not. However, if the object's clippath is added to the canvas on the iPhone, dragging a few times will cause a memory error.

Actual Behavior

When adding an object's clippath to canvas and drag it several times, get "Total canvas memory use exceed the maximum limit" error. However, if do not add the object's clippath to the canvas, work normally.

[anthify]

I believe this maybe connected to this issue.

Try adding this to your code before instantiating your canvas. (warning: using some es6 features).

fabric.Canvas.prototype._toObjectMethod = function _toObjectMethod(
  methodName,
  propertiesToInclude
) {
  const { clipPath } = this;
  const data = {
    version: fabric.version,
    objects: this._toObjects(methodName, propertiesToInclude)
  };

  if (clipPath) {
    data.clipPath = clipPath;
  }

  fabric.util.object.extend(
    data,
    this.__serializeBgOverlay(methodName, propertiesToInclude)
  );

  fabric.util.populateWithProperties(this, data, propertiesToInclude);

  return data;
};

[SooChang-Lee]

I have applied your code but still have a memory error on the iPhone.

I have not been able to release the app for iPhone because this issue is not resolved.
There is no problem with Android and PC browsers.

Could you fix a memory error when using clippath on the iPhone?

@asturur Please take a look at this issue

[SooChang-Lee]

@asturur @kangax Please check this issue...

[asturur]

have lot of emails, getting rid of the one liners first to make some breathing space for me.

Meanwhile can you try to disable retina on your canvas? Just to try.

when creating the canvas pass 'enableRetinaScaling: false' in the options object.

[SooChang-Lee]

@asturur Thank you for your effort.

Changing enableRetinaScaling to false still causes the same problem.
(Total canvas memory use exceed the maximum limit 224MB)

There is a problem with using a small image. Take a look at the example url.

The problem occurs when clippath is added to the canvas.

There is no problem in the pc browser and the android browser.

I hope it has been resolved.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ghost]

@asturur @kangax Have you fix this issue?

it happen to me.