Fabric.js: Resizing objects with a clipPath gives blurry edges

[matrei]

Version

2.6.0

Test Case

https://jsfiddle.net/mattiasr/h7t6yp8d/12/

Information about environment

Nodejs or browser? Browser
Which browsers? Chromium, Firefox

Steps to reproduce

Resize the object in the fiddle quite a bit larger.

Expected Behavior

The edge of the circle gets redrawn to be sharp

Actual Behavior

The edge of the circle stays blurry

[asturur]

yes this is a known missing thing, i ll work on it as soon as i close a couple of bugs.
The clipPath cache does not take care of the parent object scaling.

[asturur]

@blobinabottle

[blobinabottle]

Thanks! I'll dig a bit in the code... Maybe I can find a (weird? :-D) solution or workaround.

[asturur]

maybe the error is in me wanting to use objectCaching on the clippath object. If cache is invalidated, we should be ok not checking inf the clippath is still valid and just recalculate it and redraw it.

[satendra02]

I am facing the same problem. Is this issue fixed? or any workaround?

[asturur]

not yet, is an hard fix somehow.

[maksym-plotnikov]

We're facing the same problem then we have a video/image with clipPath and it is scaling inside this clipped area. So there's a "jittering"(trembling) effect during animation. Check next video:
https://drive.google.com/file/d/1hGr1NyJtM17o8Z_8rRxYDAhPXycIMhvV/view?usp=sharing

Really looking forward for fix from @asturur or maybe You have an idea why it is behaving like this and give us a clue how we can fix it by our own.

[asturur]

Probably as soon as i merge the pr for masks i can see if i can generalize a fix for both.