The title say it all. You can see Fabric.js Mask Filter Demo. This should be pretty simple but I can't find any example of applying mask to Fabric.js.

I am trying to apply mask to my JSFiddle. /

From my JSFiddle, my goal is to have both logo and pugImg clipped inside this picture (or any picture if you want). Well, I can't even mask one picture anyway, so if this is not bothering you, please update the JSFiddle for better explanation.

In addition, the code from @kangax, creator of Fabric.js <3, in this question should be the solution but I can't manage to work. The result should be like the image below. Any further suggestion is appreciated.

The title say it all. You can see Fabric.js Mask Filter Demo. This should be pretty simple but I can't find any example of applying mask to Fabric.js.

I am trying to apply mask to my JSFiddle. http://jsfiddle/ZxYCP/342/

From my JSFiddle, my goal is to have both logo and pugImg clipped inside this picture (or any picture if you want). Well, I can't even mask one picture anyway, so if this is not bothering you, please update the JSFiddle for better explanation.

In addition, the code from @kangax, creator of Fabric.js <3, in this question should be the solution but I can't manage to work. The result should be like the image below. Any further suggestion is appreciated.

• javascript
• html5-canvas
• fabricjs
• mask

Share Improve this question Follow edited May 23, 2017 at 12:09 CommunityBot 111 silver badge asked Feb 17, 2016 at 17:27 MesMes 17744 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You are not really trying ot mask an image. You are using some positing effects. There are a couple of things to understand that are not directly related to fabric.js.

A mask goes over an image.

The demo link you posted will not make you get the effect as in the screenshot.

If this is the case, you should have:

• a light blue canvas

• a pug.jpg image

• a white overlay image with a girl-shaped transparent hole in it

Make a sandwich with those 3. In this case you are masking the canvas not the image.

If you have a girl-shaped path, you can clip the canvas as seen in:

Fabric.js Clip Canvas (or object group) To Polygon

But you state that you want to use a image instead. So if you do not have the overlay with girl-shaped hole, you can use another solution to get the same effect:

• a transparent canvas

• a light blu image with a shape you need and transparent pixels all around

• a pug.jpg image

Add the first image on the canvas; set the globalCompositeOperation of the pug.jpg to 'source-atop' paint the other image over the other

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://fabricjs./assets/2.svg', function(img){
  img1 = img;
  fabric.Image.fromURL('http://fabricjs./assets/pug.jpg', function(img){
    img1.scaleToWidth(canvas.getWidth());
    img2 = img;
    img2.scaleToHeight(300);
    img2.left = 50;
    img2.top = 50;
    img2.globalCompositeOperation = 'source-atop';
    canvas.add(img1);
    canvas.add(img2);
  });
});

<script type ="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>