fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.1k stars 3.45k forks source link

[Bug]: globalCompositeOperation does not work in node.js #8788

Open joanned opened 1 year ago

joanned commented 1 year ago

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)

  1. I first created the starfish background image and added it to the canvas, which works fine.
  2. Then I created a fabric Group, that groups the img and the maskImg together.
  3. 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.
  4. 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.

Expected Behavior

This jsfiddle shows the expected behavior. It works in a javascript/html environment: https://jsfiddle.net/aqvkj5zg/2/

The maskImage properly masks the baseImage and not backgroundImage

Screen Shot 2023-03-18 at 7 20 25 PM

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.js

Screen Shot 2023-03-18 at 7 21 23 PM

Error Message & Stack Trace

no error logs
ShaMan123 commented 1 year ago

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)