Current bug behaviour

Tiles appear to have some anti-aliasing or filtering applied when running on flutter web:

Expected behaviour

Same project running on windows (window size same as web screenshot):

Steps to reproduce

1) Set camera with a fixed resolution that matches the width and height of the tilemap. Also set viewFinder.anchor = Anchor.topLeft on the camera. 2) Load the tilemap using TiledComponent.load and then add it 3) Run with flutter run -d chrome

Flutter doctor output

[√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.19045.4291], locale en-US)
    • Flutter version 3.19.6 on channel stable at C:\Users\Joey\dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (3 weeks ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\Joey\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.0)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.89.0)
    • VS Code at C:\Users\Joey\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.88.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.4291]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 124.0.6367.201
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 122.0.2365.59

[√] Network resources
    • All expected network resources are available.

• No issues found!

More environment information

Tiled version: 1.10.2
Flame Tiled version: 1.20.1
Platform affected: web

More information

I tried disabling anti-aliasing and filtering in the layerPaintFactory, but that didn't change anything:

level = await TiledComponent.load(
      'level-01.tmx',
      Vector2.all(16),
      layerPaintFactory: (opacity) {
        return Paint()
          ..isAntiAlias = false
          ..filterQuality = FilterQuality.none;
      },
    );

add(level);

flame-engine / tiled.dart

Blurry tiles on flutter web #81