fabricjs / fabric.js

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

[Bug]: Node export to dataURL is wrong #9567

Open xorb opened 9 months ago

xorb commented 9 months ago

CheckList

Version

6.0.0-beta16

In What environments are you experiencing the problem?

Node.js

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/devbox/fabric-node-dflwyw?file=%2Fsrc%2Findex.ts%3A14%2C1

Steps To Reproduce

  1. Open demo link
  2. Wait for images to be rendered
  3. Compare image outputs png vs svg

Expected Behavior

image

Actual Behavior

image

Error Message & Stack Trace

1. This happens in fabric 6.x and 5.x (node).
2. In the browser it seems to be working as expected
ShaMan123 commented 9 months ago

This is a bug that can be fixed by #8298 The problem is the absence of context isolation. Fabric confuses context isolation and object caching. Initially object caching was planned for performance I think but then the need for context isolation came and caching was reused for that purpose. This flaw in design has many bugs to blame. Enough of design context. In node object caching is turned off by default, meaning there is no context isolation by default. Since your group has an opacity value and there is no context isolation the opacity value leaks to each object instead of being applied to the group context. The workaround is simple, set objectCaching: true as I did here but that might open the door for new bugs that are related to this issue (shadow rendering for example)

@ebigtm