fix(ColorMatrix): Restore correct alpha for JS colorMatrix filter (#1…

…0313)

.github/workflows/tests.yml

@@ -44,11 +44,14 @@ jobs:
       - name: Run ${{ matrix.suite }} tests with coverage
         if: matrix.suite == 'visual'
         run: npm run test:visual:coverage
-      - name: Upload test coverage
+      - name: Verify coverage files
+        run: ls -l ./.nyc_output/*.json
+      - name: Upload test coverage ${{ matrix.suite }}
         uses: actions/upload-artifact@v4
         with:
           name: coverage-${{ matrix.suite }}
-          path: .nyc_output/*.json
+          path: ./.nyc_output/*.json
+          include-hidden-files: true
 
   browser:
     needs: [prime-build]
@@ -107,7 +110,8 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: coverage-jest
-          path: .nyc_output/*.json
+          path: ./.nyc_output/*.json
+          include-hidden-files: true
 
   e2e:
     needs: [prime-build]
@@ -131,11 +135,13 @@ jobs:
         with:
           name: e2e-report
           path: ./e2e/test-report/
+          include-hidden-files: true
       - name: Upload Test Coverage
         uses: actions/upload-artifact@v4
         with:
           name: coverage-e2e
           path: ./e2e/test-results/**/coverage.json
+          include-hidden-files: true
   coverage:
     needs: [node-coverage, e2e]
     name: Coverage reporting
@@ -148,21 +154,21 @@ jobs:
           install-system-deps: false
       - uses: actions/download-artifact@v4
         with:
-          name: coverage-unit
-          path: .nyc_output
+          name: coverage-e2e
+          path: ./.nyc_output
       - uses: actions/download-artifact@v4
         with:
-          name: coverage-visual
-          path: .nyc_output
+          name: coverage-jest
+          path: ./.nyc_output
       - uses: actions/download-artifact@v4
         with:
-          name: coverage-e2e
-          path: .nyc_output
+          name: coverage-unit
+          path: ./.nyc_output
       - uses: actions/download-artifact@v4
         with:
-          name: coverage-jest
-          path: .nyc_output
-      - run: ls -l .nyc_output
+          name: coverage-visual
+          path: ./.nyc_output
+      - run: ls -l ./.nyc_output
       - run: npm run coverage:report
       - uses: romeovs/[email protected]
         if: github.event_name == 'pull_request' || github.event_name == 'pull_request_target'

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [next]
 
+- fix(ColorMatrix): Restore correct alpha for JS colorMatrix filter [#10313](https://github.com/fabricjs/fabric.js/pull/10313)
+
 ## [6.5.2]
 
 - chore(): Reduce some verbose code [#10311](https://github.com/fabricjs/fabric.js/pull/10311)

src/filters/ColorMatrix.spec.ts

@@ -0,0 +1,37 @@
+import { ColorMatrix } from './ColorMatrix';
+import type { T2DPipelineState } from './typedefs';
+
+describe('ColorMatrix', () => {
+  it('apply2D colorsOnly: true', () => {
+    const filter = new ColorMatrix({
+      matrix: [
+        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+      ],
+      colorsOnly: true,
+    });
+    const inputData = {
+      imageData: {
+        data: [1, 2, 3, 4],
+      },
+    } as unknown as T2DPipelineState;
+    filter.applyTo2d(inputData);
+    expect(JSON.stringify(inputData.imageData.data)).toBe('[1289,2594,3899,4]');
+  });
+  it('apply2D colorsOnly: false', () => {
+    const filter = new ColorMatrix({
+      matrix: [
+        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
+      ],
+      colorsOnly: false,
+    });
+    const inputData = {
+      imageData: {
+        data: [1, 2, 3, 4],
+      },
+    } as unknown as T2DPipelineState;
+    filter.applyTo2d(inputData);
+    expect(JSON.stringify(inputData.imageData.data)).toBe(
+      '[1305,2630,3955,5280]',
+    );
+  });
+});

src/filters/ColorMatrix.ts

@@ -91,7 +91,8 @@ export class ColorMatrix<
         data[i] += a * m[3];
         data[i + 1] += a * m[8];
         data[i + 2] += a * m[13];
-        data[i + 3] += a * m[18];
+        data[i + 3] =
+          r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255;
       }
     }
   }