The new clipPath property

In 2.4.0 we introduce the clipPath property for all objects. ClipPath will replace clipTo: funcion() {} trying to achieve the same flexibility but better compatibility.

How to use it

Create your own clipPath as a normal fabric Object, and assign it to the clipPath property of the object you want to clip.
By definition in SVG specs clipPath have no stroke and are filled with black, the pixel of the object that overlaps with black pixels will be visible, the other not.
Let's start with some basic examples and let's see how it looks like.
In this first example a red rectable is clipped with a circle, only the part inside the circle is visible. Not very usefull, but still the basic functionality is this.
Please notice: the clipPath is positioned starting from the center of the object, object originX and originY do not play any role, while clipPath originX and originY do. The positioning logic is the same as for fabric.Group.


We can clip a group:


Or We can clip using groups. In case of groups remember that each object in the group will be logically OR with others, there is no nonzero or evenodd clip-rule

  Continue with more examples