I first created the starfish background image and added it to the canvas, which works fine.
Then I created a fabric Group, that groups the img and the maskImg together.
I set maskImg.globalCompositeOperation = 'destination-out'; so that any parts that maskImg touches img, it will mask those areas. I don't want to mask the background image.
I add that group to canvas
note: is there a better way to do masking of specific images and not the whole canvas? I tried image.BlendImage which did not work well at all. globalCompositeOperation works great but it's not working in node.js.
Somewhere I have a PR that handles this case.
I believe setting objectCaching to true will fix the issue (node has it disabled by default .the browser has it enabled)
CheckList
Version
5.3.0
In What environments are you experiencing the problem?
Node.js
Node Version (if applicable)
16.13.0
Link To Reproduction
https://codesandbox.io/s/fabric-2-gf7x5r?file=/src/index.js (refresh the browser tab to see image result)
Steps To Reproduce
Code reproduced here in this codesandbox node.js environment that generates the image in node.js with fabric: https://codesandbox.io/s/fabric-2-gf7x5r?file=/src/index.js (refresh the browser tab to see image result)
img
and themaskImg
together.maskImg.globalCompositeOperation = 'destination-out';
so that any parts thatmaskImg
touchesimg
, it will mask those areas. I don't want to mask the background image.note: is there a better way to do masking of specific images and not the whole canvas? I tried
image.BlendImage
which did not work well at all.globalCompositeOperation
works great but it's not working in node.js.Expected Behavior
This jsfiddle shows the expected behavior. It works in a javascript/html environment: https://jsfiddle.net/aqvkj5zg/2/
The
maskImage
properly masks thebaseImage
and notbackgroundImage
Actual Behavior
This codesandbox in the node environment that generates the image shows that
maskImage
masks both the backgroundImage and baseImage : https://codesandbox.io/s/fabric-2-gf7x5r?file=/src/index.jsError Message & Stack Trace