We are currently in the process of transitioning a project from HTML and CSS to Fabric JS. This project allows users to manipulate images by moving them around and applying filters. In our current HTML/CSS implementation, we handle image positioning with CSS and apply image effects using the CSS filter property. Users have the ability to adjust both the brightness and contrast of the images.
However, we have encountered an issue where the behavior of the CSS filter property differs from that of Fabric filters. Specifically, it seems that the CSS filter operates multiplicatively while Fabric filters work additively. This discrepancy results in noticeable differences in the outcomes of the two solutions. For example, adjusting the brightness of an image by +33% yields different results when compared between CSS filter and Fabric filter implementations.
CSS filter (filter: brightness(1.33) - Default is 1)
https://i.sstatic.net/wjkJi.png
Fabric filter (
- Default is 0)
https://i.sstatic.net/Q6gCc.pngnew fabric.Image.filters.Brightness({ brightness: 0.33 });
To illustrate this difference further, here are the default states of the image under both CSS and Fabric JS implementations (while not exactly identical, they are quite close).
CSS Default (1 Brightness) https://i.sstatic.net/XbyoD.png
Fabric JS Default (0 Brightness) https://i.sstatic.net/m2R9r.png
It appears that the main distinction lies in how the filters are applied, with CSS operating multiplicatively and Fabric acting additively. Our goal is to achieve consistency between these approaches, preferably by aligning the behavior of Fabric filters with that of CSS. Since our current solution relies on CSS, we aim for a seamless transition without compromising functionality. The same concern applies to the Contrast filter as well.
Thank you in advance for your assistance!