Repository: flutter
Issue: ColorFiltered.matrix does not work properly on Web (html)
Labels: engine,platform-web,c: rendering,has reproducible steps,P2,found in release: 3.0,found in release: 3.1,team-web,triaged-web

## Steps to Reproduce
Using a Color matrix in the example the image should be duotone green and red, instead it only produces a green image.

This is the flutter demo code with a matrix I created. Using the same matrix in the web example produces the proper green and red image. Web example: https://api.flutter.dev/flutter/widgets/ColorFiltered-class.html

**Expected results:**
On Mac, Android, and Web, I expected to see a duotone green and red image.

**Actual results:** <!-- what did you see? -->
On Mac and Android, I see a green image. On Web I see the proper green and red image.

<details>
<summary>Code sample</summary>

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          ColorFiltered(
            colorFilter: const ColorFilter.matrix([
              -1.0,
              0.0,
              0.0,
              0.0,
              1.0,
              1.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              0.0,
              1.0,
              0.0,
            ]),
            child:
                // For mac: update permissions following: https://stackoverflow.com/a/65866640/4433852
                Image.network(
                    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
          ),
        ],
      ),
    );
  }
}

```

</details>

<details>
  <summary>Logs</summary>

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5 21G72 darwin-arm (Rosetta), locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.69.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

% flutter -version
Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d570e (2 weeks ago) • 2022-07-13 11:24:16 -0700
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2
```

</details>


<!--
      Consider also attaching screenshots and/or videos to better
      illustrate the issue.

      You can upload them directly on GitHub.
      Beware that video file size is limited to 10MB.
-->

| Web Version | Mac Version |
| -- | -- |
| <img width="479" alt="Screen Shot 2022-07-30 at 8 34 04 PM" src="https://user-images.githubusercontent.com/4061606/182004719-cd61524a-cbbc-4974-9e56-da061753095d.png"> | <img width="545" alt="Screen Shot 2022-07-30 at 8 34 15 PM" src="https://user-images.githubusercontent.com/4061606/182004720-40c6eed2-2899-465f-bd3d-2bcbd9ea09d3.png"> |