fix(FabricObject): Render clipPath as sharp as the object

[asturur]

Description

replace #7186

This PR prescale the canvas of the clipPath in order to be as scaled up as the object BEFORE drawing the actual Clippath on top of it.

In Action

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

• Run Next Template
• Run Node Template
• Run Vanilla Template
• Run Vue Template

[github-actions]

Build Stats

file / KB (diff)	bundled	minified
fabric	915.658 (+0.803)	305.835 (+0.293)

[asturur]

The difference is great:

but need to write the code in a way it doesn't fail for non cached object

[asturur]

Also a bunch of strange results that needs investigations

[asturur]

Note for myself:
i need an svg with overlapping clipPaths so that i can measure regression clearly and measure nested scaling

[asturur]

Did some test, scaling by zoomX and zoomY while works for a single nested clippath is not the way to go because it is too hard carry over the nested scaling to inner clippaths.

In theory the main cache canvas of the object is always big enough ( and of course too big, but never too small )
The first clipPath start drawing at cacheTranslationX/cacheTranslationY.

The nested one needs to start drawing in a canvas that is the same as that one, but needs to carry over the transformation of the first clippath and then the second.

[asturur]

Svg vs rendering.
While it is approaching, i don't think this code is correct.
As it is it can only work for when there are no nested clippaths.
That would still better than nothing

[asturur]

oh well now it matches

but yet is not ifinitely recursive, so isn't a great idea.

But is a step forward

[ShaMan123]

I know this is WIP but I wanted to suggest using parent instead of clipPathParent

[ShaMan123]

It will still respect the fact that a parent is unique

[asturur]

the clipPathParent is a temporary notation to see if things could work.
Won't go anywhere.
I wanted to experiment if i could at leat get the drawing correct and understand which data i need to render correctly