Repository: flutter
Issue: [Web] Unexpected anti-aliased in HTML renderer
Labels: engine,platform-web,e: web_html,has reproducible steps,P3,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

I only tested the web target.
This appears only with the html web renderer.

1. Add some zoom via transformation
2. Draw an image inside an Opacity widget (opacity widget is important for some reason, image may be drawn via Image widget or CustomPainter, it doesn't seem to matter)
3. Draw a rectangle via CustomPainter (the rectangle should not be aligned to pixels!)
4. Draw a few lines (this is also important for some reason)
5. The boundary of the rectangle becomes strangely anti-aliased


### Expected results

I expect the boundary of the rectangle to remain sharp (as demonstrated by the case when using canvaskit renderer).
I'd also expect the line not to be anti-aliased especially in a weird scaled up way.

### Actual results

The boundary of  the rectangle becomes blurred.
The line also seems to be anti-aliased in a weird (magnified) way.

### Code sample

<details><summary>Code sample: https://gist.github.com/peti29/908753c493b806518fb65a356a01754e</summary>

```dart
// Reproduction sample for weird anti-alias issue
//
// !!! note !!! This issue can only be reproduced using the html web renderer!
// I didn't find a way to use that with DartPad so this can not be shown here.
// Please copy-paste the code and run it using --web-renderer html
//
// additional notes:
// - the issue can be reproduced both with Image widget and CustomPainter image drawing
// - it only appears if there is both an Opacity widget and CustomPainter that draws lines
// - pan/zoom is necessary for the weird anti-aliasing to be visible

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' hide Colors;
import 'package:http/http.dart' as http;
import 'dart:ui' as ui;
import 'dart:async';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
const String imgUrl =
    'https://static01.nyt.com/images/2016/10/26/science/26tb-foliage/26tb-foliage-superJumbo.jpg';
ui.Image? uiImage;

void main() async {
  await init();
  runApp(MyApp());
}

// Crude workaround to load the image asynchronously and access it from a stateless widget.
// This is only needed for the custom painter mode.
Future init() async {
  http.Response response = await http.get(Uri.parse(imgUrl));
  var imgData = response.bodyBytes;
  final completer = Completer<ui.Image>();
  ui.decodeImageFromList(imgData, completer.complete);
  uiImage = await completer.future;
}

class MyApp extends StatelessWidget {
  final bool _usePainter =
      false; // <<== issue appears with painter and image widget as well

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: darkBlue,
        ),
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child: Container(
                    color: const Color(0xFF0000FF),
                    child: SizedBox(
                        width: 800,
                        height: 600,
                        child: ClipRect(
                            child: Transform(
                                // <<== zoom in necessary for it to be visible
                                transform:
                                    Matrix4.translation(Vector3(-140, -10, 0))
                                        .scaled(30),
                                child: Stack(
                                    fit: StackFit.passthrough,
                                    clipBehavior: Clip.none,
                                    children: [
                                      Opacity(
                                        // <<== one factor: Opacity widget
                                        opacity: 1,
                                        child: (_usePainter)
                                            ? ImagePainterWidget()
                                            : const ImageWidget(imgUrl),
                                      ),
                                      RectPainterWidget(),
                                      LinePainterWidget() // <<== one factor: line drawing
                                    ]))))))));
  }
}

class ImageWidget extends StatelessWidget {
  final String _url;
  const ImageWidget(this._url);

  @override
  Widget build(BuildContext context) {
    return Image.network(_url,
        fit: BoxFit.none, filterQuality: FilterQuality.none);
  }
}

class ImagePainterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: _ImagePainter(uiImage));
  }
}

class _ImagePainter extends CustomPainter {
  final ui.Image? uiImage;
  _ImagePainter(this.uiImage);

  @override
  void paint(Canvas canvas, Size size) {
    if (uiImage != null) {
      canvas.drawImage(
          uiImage!, Offset.zero, Paint()..filterQuality = FilterQuality.none);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class RectPainterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: _RectPainter());
  }
}

class _RectPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rectPaint = Paint()
      ..style = PaintingStyle.fill
      ..isAntiAlias = false
      ..strokeWidth = 3
      ..filterQuality = FilterQuality.none
      ..color = const Color.fromARGB(255, 0, 255, 0);

    canvas.drawRect(
        const Rect.fromLTWH(13.468, 9.467, 201.546, 103.972), rectPaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class LinePainterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: _LinePainter());
  }
}

class _LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final linePaint = Paint()
      ..style = PaintingStyle.stroke
      ..isAntiAlias = false
      ..strokeWidth = 3
      ..filterQuality = FilterQuality.none
      ..color = const Color.fromARGB(255, 255, 255, 255);

    canvas.drawLine(const Offset(8, 12), const Offset(20, 12), linePaint);
    canvas.drawLine(const Offset(10, 10), const Offset(0, 420), linePaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

```

</details>


### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]
![alias-right](https://github.com/flutter/flutter/assets/70334968/008080d9-6899-412f-8498-d66005af936f)
![alias-wrong](https://github.com/flutter/flutter/assets/70334968/e8c5c85f-292d-405f-bec0-2d9ed15fa0ae)

</details>




### Logs

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


### Flutter Doctor output

<details><summary>Doctor output</summary>

Sorry, I'll omit this. It appears on multiple machines.
flutter --version output:
```console
Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f468f3366c (3 weeks ago) • 2023-07-12 15:19:05 -0700
Engine • revision cdbeda788a
Tools • Dart 3.0.6 • DevTools 2.23.1
```

</details>