anti aliasing issues with skia image in canvas

[maxximee]

Using canvas and loading a skia image has terrible aliasing.

Image with fit="none" doesn't show any pixelation issues, the image is high resolution.

Setting any other fit format creates horrible aliasing quality. Here is a 2x zoomed in picture :

This is with sampling={CubicSampling}, which is suppose to be best quality.
You can actually see this pixelated aliasing issue on the documentation picture as well : https://shopify.github.io/react-native-skia/docs/images

Is there a way to have a nice smooth picture in the canvas? Or is the only solution to make a copy, scale it down so it fits in the "none" fit format?

[wcandillon]

something is off here can you provide a small reproducible example? I'm sure we can fix this promptly

[maxximee]

Hi @wcandillon sadly haven't had time to create a simple reproducible example project yet, I've been fighting to get the SkiaFrameProcessor working for a few months on my production code, but my app is tanking with all the crashes...
But you can see on the same effect on the skia doc itself:

[kkx64]

Yup anything other than fit="none" has this effect

[sueun-dev]

This looks like a minification artifact path, not a source-resolution issue.

fit="none" avoids the resampling transform, which explains why it looks clean. Once fit is applied, you are in drawImageRect sampling territory and aggressive downscale can alias.

What usually helps most:

sampling={{ filter: FilterMode.Linear, mipmap: MipmapMode.Linear }}

Also:

• Keep destination rect pixel-aligned (x/y/width/height as integers).
• Avoid huge one-step downscales (for example 4K -> tiny thumbnail). Pre-resize once near target size if possible.

For this specific issue, a tiny repro with one image and a large downscale factor would be ideal, because it makes it easy to validate whether mipmap handling should be improved internally.