Skip to content

Flutter Web + CanvasKit automatically turns on WebGL antialiasing #53787

@luigi-rosso

Description

@luigi-rosso

Compiling an app for Flutter web with the CanvasKit backend automatically enables the WebGL context antialiasing, effectively doubling antialiasing and making it impossible to paint hard aliased edges, which in some cases is desirable. It'd be nice if this could be disabled.

Here's an example of a custom painter in Flutter on MacOS with antialiasing disabled in the Paint objects:
image

Notice the zoomed in region (using xscope) shows clear stepping and no alpha blending whatsoever on the edges (which is what we want in this case).

Same app compiled with:

flutter run --release --dart-define=FLUTTER_WEB_USE_SKIA=true -d chrome

image

Notice fuzzy/antialiased edges even though Skia isn't doing the antialiasing. This is because the WebGL context is turning on antialiasing:
image

Sample code:
https://github.com/luigi-rosso/flutter-web-antialias

Doctor's note:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel dev, v1.16.4-pre.33, on Mac OS X 10.15.3 19D76, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] Connected device (4 available)

Metadata

Metadata

Labels

e: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webplatform-webWeb applications specifically

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions