Repository: flutter
Issue: Canvas.drawAtlas ignores Paint.filterQuality on web with CanvasKit
Labels: engine,platform-web,a: images,e: web_canvaskit,has reproducible steps,P2,found in release: 2.5,found in release: 2.6,team-web,triaged-web

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

0. Copy ![terrain](https://user-images.githubusercontent.com/1571180/138988214-773ef000-5a9c-42ed-a12e-60f05932c242.png) to images/
1. Execute `flutter run` on the code sample <!-- (see "Code sample" section below) -->
2. Check the result

**Expected results:** <!-- what did you want to see? -->
Solid orange rhombus

**Actual results:** <!-- what did you see? -->
Orange rhombus with grid pattern

<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.
-->

```dart
import 'package:flutter/material.dart' hide Image;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:ui';
import 'dart:typed_data';

void main() async {
  runApp(MyApp());
}

Sprite _sprite;
const String atlasName = "images/terrain.png";
ValueNotifier repaint = ValueNotifier(double.nan);

int _mapSize = 32;
const double _cellWidth = 64.0;
const double _cellHeight = 32.0;
const double _maxTile = 16.0;

class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
    loadTerrain();
  }
    
  @override
  Widget build(BuildContext context) => MaterialApp(
    title: 'Canvas issue',
    home: Scaffold(
      body: CustomPaint(painter: MapPainter(repaint))
    )
  ); 
}

class MapPainter extends CustomPainter {
  double _scale = 1.0;
  Atlas _atlas;

  MapPainter(Listenable repaint) : super(repaint: repaint);

  @override
  void paint(Canvas canvas, Size size) {
    if (_sprite != null) {
      _atlas = _initAtlas(_sprite);
    } else {
      return;
    }

    canvas.translate((_mapSize - 1)*_cellWidth/2*_scale, 0);
    canvas.scale(_scale, _scale);

    var paint = Paint();
    _atlas.draw(canvas, paint);
  }

  @override
  bool shouldRepaint(MapPainter oldDelegate) => false;

  Atlas _initAtlas(Sprite sprite) {
    final atlas = Atlas(sprite);
    for (var x = 0; x < _mapSize; x++) {
      for (var y = 0; y < _mapSize; y++) {
        _setAtlasCell(atlas, x, y);  
      }
    }
    return atlas;
  }

  void _setAtlasCell(Atlas atlas, int x, int y) {
    final destOffset = cellCorner(x, y);
    final transform = RSTransform.fromComponents(rotation: 0.0, scale: 1.0, anchorX: 0.0, anchorY: 0.0,
      translateX: destOffset.dx, translateY: destOffset.dy);    
    final cellRect = Rect.fromLTWH(destOffset.dx % _maxTile, destOffset.dy % _maxTile, _cellWidth, _cellHeight);
    atlas.setRect(x*_mapSize + y, transform, cellRect);
  }
}

class Sprite {
  Image image;
  int width;
  int height;
  int centerX;
  int centerY;

  Sprite(this.image, this.width, this.height, this.centerX, this.centerY);
}

class Atlas {
  Sprite _sprite;
  Map<int, Rect> _rects = {};
  Map<int, RSTransform> _transforms = {};

  Atlas(this._sprite);

  void setRect(int key, RSTransform transform, Rect rect) {
    _rects[key] = rect;
    _transforms[key] = transform;
  }

  void draw(Canvas canvas, Paint paint) {
    canvas.drawAtlas(_sprite.image, _transforms.values.toList(), _rects.values.toList(), null, null, null, paint);
  }
}

Future<void> loadTerrain() async {
  var data = await rootBundle.load(atlasName);
  final Uint8List bytes = Uint8List.view(data.buffer);
  final Codec codec = await instantiateImageCodec(bytes);
  final Image image = (await codec.getNextFrame()).image;
  _sprite = Sprite(image, image.width, image.height, image.width~/2, image.height~/2);
  repaint.value = double.nan;
}

Offset cellCorner(int x, int y) => Offset((x - y)*_cellWidth/2.0, (x + y)*_cellHeight/2);
Offset cellCenter(int x , int y, int size) => cellCorner(x, y).translate(_cellWidth/2, _cellHeight/2 * size);
```

</details>

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue.
-->

```
[  +78 ms] executing: [REDACTED\flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[  +90 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +1 ms] 18116933e77adc82f80866c928266a5b4f1ed645
[   +1 ms] executing: [REDACTED\flutter/] git tag --points-at 18116933e77adc82f80866c928266a5b4f1ed645
[  +84 ms] Exit code 0 from: git tag --points-at 18116933e77adc82f80866c928266a5b4f1ed645
[   +1 ms] 2.5.3
[  +12 ms] executing: [REDACTED\flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[  +66 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[   +1 ms] origin/stable
[   +1 ms] executing: [REDACTED\flutter/] git ls-remote --get-url origin
[  +57 ms] Exit code 0 from: git ls-remote --get-url origin
[   +1 ms] https://github.com/flutter/flutter.git
[ +426 ms] Unable to locate an Android SDK.
[   +4 ms] executing: [REDACTED\flutter/] git rev-parse --abbrev-ref HEAD
[  +39 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[   +1 ms] stable
[  +59 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +4 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +141 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +9 ms] Artifact Instance of 'WindowsUwpEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +129 ms] Multiple devices found:
[  +25 ms] Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19043.1288]
[   +1 ms] Chrome (web)      • chrome  • web-javascript • Google Chrome 95.0.4638.54
[   +1 ms] Edge (web)        • edge    • web-javascript • Microsoft Edge 95.0.1020.30
[   +3 ms] [1]: Windows (windows)
[        ] [2]: Chrome (chrome)
[   +1 ms] [3]: Edge (edge)
[   +2 ms] Please choose one (To quit, press "q/Q")
[        ] : 
[+1769 ms] 2
[  +13 ms] Skipping pub get: version match.
[  +61 ms] Found plugin integration_test at REDACTED\flutter\packages\integration_test\
[ +100 ms] Found plugin integration_test at REDACTED\flutter\packages\integration_test\
[   +8 ms] Generating REDACTED\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[ +123 ms] Launching .\lib\main copy.dart on Chrome in debug mode...
[ +149 ms] Updating assets
[ +123 ms] Manifest contained wildcard assets. Inserting missing file into build graph to force rerun. for more information see #56466.
[   +7 ms] Waiting for connection from debug service on Chrome...
[  +36 ms] Found plugin integration_test at REDACTED\flutter\packages\integration_test\
[  +62 ms] Found plugin integration_test at REDACTED\flutter\packages\integration_test\
[ +137 ms] <- reset
[  +10 ms] REDACTED\flutter\bin\cache\dart-sdk\bin\dart.exe --disable-dart-dev REDACTED\flutter\bin\cache\artifacts\engine\windows-x64\frontend_server.dart.snapshot --sdk-root
REDACTED\flutter\bin\cache\flutter_web_sdk/ --incremental --target=dartdevc --debugger-module-names --experimental-emit-debug-metadata -DFLUTTER_WEB_AUTO_DETECT=true --output-dill
REDACTED\AppData\Local\Temp\flutter_tools.d8ed0eaa\flutter_tool.c41f5a5b\app.dill --libraries-spec file:///REDACTED/flutter/bin/cache/flutter_web_sdk/libraries.json --packages
REDACTED\.dart_tool\package_config.json -Ddart.vm.profile=false -Ddart.vm.product=false --enable-asserts --track-widget-creation --filesystem-root
REDACTED\AppData\Local\Temp\flutter_tools.d8ed0eaa\flutter_tools.57d502fb --filesystem-scheme org-dartlang-app --initialize-from-dill build\c7922d95bf4a2462b75c84a97c312edb.cache.dill.track.dill --platform      
file:///REDACTED/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill --no-sound-null-safety
[  +12 ms] <- compile org-dartlang-app:/web_entrypoint.dart
[+15426 ms] Waiting for connection from debug service on Chrome... (completed in 15.7s)
[   +1 ms] Synced 28.0MB.
[   +1 ms] <- accept
[   +1 ms] Caching compiled dill
[ +638 ms] [CHROME]:
[   +6 ms] [CHROME]:DevTools listening on ws://127.0.0.1:56652/devtools/browser/f9c1daad-28db-44e7-9aa3-aacdc8186c0f
[ +956 ms] DwdsInjector: Received request for entrypoint at http://localhost:56647/main_module.bootstrap.js
[   +4 ms] MetadataProvider: Loading debug metadata...
[   +9 ms] MetadataProvider: Loaded debug metadata (no sound null safety)
[   +7 ms] DwdsInjector: Injected debugging metadata for entrypoint at http://localhost:56647/main_module.bootstrap.js
[+2612 ms] ChromeProxyService: Initializing expression compiler for main_module.bootstrap.js with sound null safety: false
[  +91 ms] DevHandler: Debug service listening on ws://127.0.0.1:56671/triEEpwPCTM=/ws

[  +27 ms] This app is linked to the debug service: ws://127.0.0.1:56671/triEEpwPCTM=/ws
[  +17 ms] Debug service listening on ws://127.0.0.1:56671/triEEpwPCTM=/ws
[   +1 ms] Running with unsound null safety
[   +1 ms] For more information see https://dart.dev/null-safety/unsound-null-safety
[   +4 ms]   To hot restart changes while running, press "r" or "R".
[   +1 ms] For a more detailed help message, press "h". To quit, press "q".
[   +1 ms] An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:56671/triEEpwPCTM=
[ +447 ms] DevTools activation throttled until 2021-10-27 10:04:22.407421.
[ +893 ms] The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:56671/triEEpwPCTM=
```

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
Analyzing REDACTED...                                              
No issues found! (ran in 1.7s)
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19043.1288], locale en-US)
    • Flutter version 2.5.3 at REDACTED\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (11 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.


[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.9.5)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31229.75
    • Windows 10 SDK version 10.0.18362.0

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[√] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.1.2
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code, 64-bit edition (version 1.61.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.20.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19043.1288]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 95.0.4638.54
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 95.0.1020.30

! Doctor found issues in 2 categories.
```

</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.
-->
![image](https://user-images.githubusercontent.com/1571180/138988168-2dda160f-6850-448b-a471-b9899c0b6f94.png)