Repository: flutter
Issue: [Web][Canvaskit] Shared memory issue with `toByteData()`
Labels: engine,platform-web,a: images,c: rendering,e: web_canvaskit,P2,team-web,triaged-web

when `toByteData()` is called on an image and the developer subsequently:

1. uses the bytes from `toByteData()` directly (unmodified) in something like `ui.decodeImageFromPixels`
2. modifies bytes from `toByteData()` (such as with `setUint32` to do something like changing the color of pixels)
3. uses the bytes again in a separate call to `ui.decodeImageFromPixels`

The expected behavior is that the modification to the color of the green image in the repro code is only shown in the second call to `ui.decodeImageFromPixels`. This works as expected on all platforms except for canvaskit on web, where modifications to the pixels from `toByteData()` seem to modify those pixels (changing the green square to a green square with red in the top left corner) in **all** uses of those pixels. 

From initial discussions with @yjbanov it seems to potentially be an issue with: https://github.com/flutter/engine/blob/main/lib/web_ui/lib/src/engine/canvaskit/image.dart#L421\

**Expected results:** <!-- what did you want to see? -->
<img src="https://user-images.githubusercontent.com/50225138/208803222-e473fa68-416d-4743-91b7-56101cce9bd6.png" height="1266" width="585"/>


**Actual results:** <!-- what did you see? -->
![Screenshot 2022-12-20 at 6 03 33 PM](https://user-images.githubusercontent.com/50225138/208803247-1824a194-373c-4353-a97e-907077643d92.png)

<details>
<summary>Code sample</summary>

<!--
      Please create a minimal reproducible sample that shows the problem
      and attach it below between the lines with the backticks.

      To create it you can use `flutter create bug` command and update the `main.dart` file.

      Alternatively, you can use https://dartpad.dev/
      which is capable of creating and running small Flutter apps.

      Without this we will unlikely be able to progress on the issue, and because of that
      we regretfully will have to close it.
-->

```
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Sample'),
        ),
        body: const Center(
          child: MyImage(),
        ),
      ),
    );
  }
}

class MyImage extends StatefulWidget {
  const MyImage({super.key});

  @override
  MyImageState createState() => MyImageState();
}

class MyImageState extends State<MyImage> {
  late ui.Image? unmodifiedImg;
  late ui.Image? modifiedImg;
  bool networkDone = false;

  loadAndProcessImages() async {
    if (!networkDone) {
      networkDone = true;
      const NetworkImage(imgUrl).resolve(const ImageConfiguration()).addListener(
        ImageStreamListener((network, _) async {
          await processImageAndLoadResult(network.image);
        }),
      );
    }
  }

  processImageAndLoadResult(ui.Image image) async {
    final ByteData originalByteData = (await image.toByteData())!;
    final ByteData pixalDataNoChanges = originalByteData.buffer.asByteData();
    ui.decodeImageFromPixels(
      pixalDataNoChanges.buffer.asUint8List(),
      image.width,
      image.height,
      ui.PixelFormat.rgba8888,
      (ui.Image pixelResultNoChange) {
        setState(() {
          unmodifiedImg = pixelResultNoChange;
        });
      },
    );
    final ByteData pixelDataWithChanges = originalByteData.buffer.asByteData();
    for (int x = 0; x < 100; x++) {
      for (int y = 0; y < 100; y++) {
        final position = (y * `image.width` + x) * 4;
        pixelDataWithChanges.setUint32(position, 0xFF0000FF);
      }
    }

    ui.decodeImageFromPixels(
      pixelDataWithChanges.buffer.asUint8List(),
      image.width,
      image.height,
      ui.PixelFormat.rgba8888,
      (ui.Image pixelResultWithChange) {
        setState(() {
          modifiedImg = pixelResultWithChange;
        });
      },
    );
    // EXPECTED BEHAVIOR:
    // modification is only made to the second use of decodeImageFromPixels
    // ACTUAL BEHAVIOR:
    // modification is made to both uses of decodeImageFromPixels
    // ui.decodeImageFromPixels(pixels, 256, 256, ui.PixelFormat.rgba8888, setImg, targetHeight: 200, targetWidth: 200);
  }

  @override
  void initState() {
    unmodifiedImg = null;
    modifiedImg = null;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    if (!networkDone) {
      WidgetsBinding.instance.addPostFrameCallback((_) async {
        await loadAndProcessImages();
      });
    }
    return Column(
      children: <Widget>[
        const Text('unmodified image'),
        RawImage(image: unmodifiedImg),
        const Text('modified image'),
        RawImage(image: modifiedImg),
      ],
    );
  }
}

const imgUrl =
    'https://upload.wikimedia.org/wikipedia/commons/d/de/Color-Green.JPG';
```

</details>