Repository: flutter
Issue: [web][canvaskit] Canvas doesn't render properly when performing multiple redraws at the same point
Labels: engine,dependency: skia,platform-web,c: rendering,e: web_canvaskit,has reproducible steps,P2,found in release: 3.10,team-web,triaged-web,found in release: 3.13

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

Create a simple project using 'flutter create app' and then replace all code within lib/main.dart with code bellow
<details><summary>lib/main.dart</summary>

```dart
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: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: TestScreen(),
    );
  }
}


class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.yellow,
          child: CustomPaint(painter: TestPainter()),
        ),
      ),
    );
  }
}


class TestPainter extends CustomPainter{
@override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0
      ..color = Colors.indigo;

    for(int i = 0; i < 15000; i++) {
      canvas.drawRRect(
        RRect.fromRectAndRadius(Rect.fromLTWH(20, 40, 100, 100), Radius.circular(20)),
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(TestPainter oldDelegate) => false;
}
```
</details>

Run the app with 'flutter run -d chrome' or with android-studio by selecting web build.

### Expected results

The result should be b yellow screen with a rounded rectangle with only a blue border without any fill.

### Actual results

The result is as expected when you render 1 time. But if you render 5000 rectangle on top of each other then rendering breaks with torn lines and weird output. 

The issue doe not happen with the same code on android. I tried to render 150_000 rectangles on top of each other and everything is fine on android side.

### Code sample

<details><summary>Code sample</summary>

```dart
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: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: TestScreen(),
    );
  }
}


class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.yellow,
          child: CustomPaint(painter: TestPainter()),
        ),
      ),
    );
  }
}

class TestPainter extends CustomPainter{
@override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0
      ..color = Colors.indigo;

    for(int i = 0; i < 15000; i++) {
      canvas.drawRRect(
        RRect.fromRectAndRadius(Rect.fromLTWH(20, 40, 100, 100), Radius.circular(20)),
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(TestPainter oldDelegate) => false;
}
```

</details>


### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

![scrot-2023-07-31-17:54:37](https://github.com/flutter/flutter/assets/1778265/11d754a9-b2f5-49c0-a15b-d698c0b32ffa)

![scrot-2023-07-31-17:55:34](https://github.com/flutter/flutter/assets/1778265/eee0cd3a-ee07-4679-92df-530bbcff8959)

</details>



### Logs

<details><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
[✓] Flutter (Channel stable, 3.10.5, on Arch Linux 6.4.2-arch1-1, locale C.UTF-8)
    • Flutter version 3.10.5 on channel stable at /opt/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (7 weeks ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /opt/Android/Sdk
    • Platform android-33, build-tools 33.0.2
    • ANDROID_HOME = /opt/Android/Sdk
    • Java binary at: /opt/android-studio/jbr/bin/java
    • Java version openjdk version "11.0.15" 2022-04-19
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = chromium

[✓] Linux toolchain - develop for Linux desktop
    • clang version 3.5.2 (tags/RELEASE_352/final)
    • cmake version 3.27.0
    • ninja version 1.11.1
    • pkg-config version 1.8.1

[✓] Android Studio (version 2022.1)
    • Android Studio at /opt/android-studio
    • Flutter plugin version 73.0.1
    • Dart plugin version 221.6103.1
    • Java version openjdk version "11.0.15" 2022-04-19

[!] Proxy Configuration
    • HTTP_PROXY is set
    ! NO_PROXY is not set

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Arch Linux 6.4.2-arch1-1
    • Chrome (web)    • chrome • web-javascript • Chromium 115.0.5790.102 Arch Linux

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

```

</details>