Fabric.js: Better support for clipping to a group in canvas.clipTo

[butch2k]

Hi,

i noticed something odd when using a group as a clipping mask, it contains several Paths but only the last added one is used for masking.

Regards,
Olivier

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[Kienz]

Can you create small jsfiddle.

[butch2k]

Here it is:
http://jsfiddle.net/butch2k/HzKp4/6/

Both squares should be red (canvas bg color) yet only the last added on is.

[Kienz]

It seems this is a bug or a limitation of ctx.clip(). The reason it didn't work is that there are two context paths (rect1 and rect2). I think that ctx.clip() handles only the last context path.
I've created small jsfiddle with four different clip functions:
http://jsfiddle.net/Kienz/L62K9/

The 4th clipping region is similar to your example => the fabric.Rect render method begins and closes a path: https://github.com/kangax/fabric.js/blob/master/src/shapes/rect.class.js#L112-137
=> if you have to rectangle in your group you have two context paths.

If you have only one beginPath and one closePath (1st and 3rd example) it works.
Maybe you can report that to chromium and firefox team.

[butch2k]

In fact it's the second beginpath() which is problematic.
If we could prevent sending a beginpath when drawing every object in a group but the first, it should work
look at the update fiddle
http://jsfiddle.net/butch2k/HzKp4/16/

[butch2k]

Ok confirmed working !
I made an ugly hack just to be sure, setting a global isFirstInGroup to true, then setting it to false at the end of the inner object loop of group render function, and setting it back on exit. I then made the beginpath of fabricPath dependant on isFirstInGroup.
So only the first item in a group is rendered with beginpath() the others do not, and so doing it works properly.

And here is what i managed to get using two paths: http://prz.in/files/paths-clipping.jpg

[kangax]

@Kienz thanks for looking into this!

@butch2k looks cool :)

I suppose I'll mark this as possible feature.

[ashishbhattb]

Hi,

I have some issue in Faric Group for Clipto

its applying mask to only last rectangle attached on group

and my requirement is to apply mask for all the rectangle used in the group, means whole object of fabric group to be apply as a mask to canvas

See the code below

var gFoW = new fabric.Group();
var rect1 = new fabric.Rect({left:clipLft[0],top:clipTp[0],fill:'grey',width:clipW[0],height:clipH[0],angle:clipRtn[0]});
var rect2 = new fabric.Rect({left:clipLft[1],top:clipTp[1],fill:'grey',width:clipW[1],height:clipH[1],angle:clipRtn[1]});
var rect3 = new fabric.Rect({left:clipLft[2],top:clipTp[2],fill:'grey',width:clipW[2],height:clipH[2],angle:clipRtn[2]});

gFoW.add(rect1);
gFoW.add(rect2);
gFoW.add(rect3);

canvas.clipTo = function(ctx){
ctx.save();
ctx.beginPath();
gFoW.render(ctx);
ctx.fillStyle = 'orange';
ctx.fill();
ctx.clip();
ctx.closePath();
};

Only rect3 gets highlighted with orange color means last rectangle get applying mask and rest all are not applying

Please guide me for the same i am new to fabric js and needs help for the same

Thanks
Ashish Bhatt

[ashishbhattb]

Hello Guys, Please support me for the group in fabric js to apply masking for all objects in 1 group

i am really frustrated for the same and needs help !!!

[afdev82]

@butch2k I'd like to have a temporary patch with your solution. Do you have time to make a pull request? I can make it by myself, but I wanted to ask you before.

[ashishbhattb]

Actually Not have time, Please help me out if i can make from canvas property

Currently what happen is if i make clipto and inside that i have make rectangle then it works for rotation property, but if i put multiple rectangles then rotation not working, it takes rotation for the last added rectangle only

My requirement is:
1 Clipto having 4 rectangles and they should rotate individually as per the rotation values for each rectangle.

[asturur]

Support for groups as clippers should be added with some things in mind:
1) clip rule
2) clip shape support for svg
3) clipping output to SVG

We should find a way to use _render(ctx, noTransform, forClipping: true) and make this works. Also clipTo function is too much generic. I would prefer to switch over a clipTo => fabricObject ( group , rect or whatever ). in this way exporting to svg would be still possible.

[asturur]

i'm marking clipTo as deprecated.
Gonna remove full clipTo functionalities in favor of clippingPaths.
That means you will loose the ability to put a free function but you will clip directly with fabric shapes.

There are multiple reasons for this:

• SVG compatibility
• easier exporting / importing no need to eval code
• on the rail way to clip.
• support for groups ( probably using global coposite operation )

[aggrosoft]

So clipTo is deprecated now in 2.x - what is the preferred method now?

[asturur]

There is nothing new now, there will be the first feature in fabric 2.1, that i start to develop as soon as i decide to wrap 2.0 in a package and get it out.

[el-wynn]

Is there currently another way to clip a single image with another one/a path with 2.0? Or do I have to use an older version?

[asturur]

the new way is not built in yet. not started apart a prototype.

[Aubron]

FYI @asturur - There is a $50 bounty on this issue that I set back in December, but never showed up on this end. It's not much, but it's something. 🤷‍♂️

[asturur]

i think the integration with bounty source is broken. I'll add the label. I really like clipping, i m just need to fix some fresh text bugs and merge an old PR from a contributor and then i want to start it

[DaltonNotetech]

how to use clippingPaths in latest fabric 2.3
Need to clip animate a textbox inside group by changing its left value. The textbox should not come outside the group.

[DaltonNotetech]

I need marquee of textbox within group

[asturur]

i think i can close this now! clipping to group works with clipPath in 2.4.0