Blurry sprite image depending on device resolution?

[imbiss41]

Hiya, I have a resolution problem and I'm trying to understand what's going on. Basically I have a simple Pixi app that renders an image as a sprite (on a grey canvas). But I find the quality of that image changes drastically depending on what screen resolution the app is viewed on. I understand the basics of resolution, scaling, pixels etc but can't wrap my head around the issue or the proper fix.

When viewed on a 4k screen, the image renders nicely and the text is clear (see picture 1), but when I view the canvas on a 1080p screen, it gets blurry and aliased (see picture 2). It will also blur of I set the scale of the 4k screen high (like 200%) in windows.

I am using pixi-viewport to zoom in and out, so these comparisons were taken with the image at a similar zoom level.

I am rendering the sprite at a fixed width and height of 1191x842 (basically a3 aspect ratio). It is also the res of the core image file. This is still high enough to be clear when viewed on the 1080p screen with a normal photo viewer.

I have tried playing with the canvas resolution, setting it more or less than window.devicePixelRatio, changing the size of the sprite to higher and lower, changing the size of the canvas itself, but nothing seems to fix the blur on lower res screens reliably.

Should also mention that when I zoom in, the blur/aliasing goes away, and the text clears up. It's only when zoomed out that it appears.

Any help is appreciated, I feel like there is a gap in my understanding of how resolution/scale is handled with Pixi.

Edited December 15, 2022 by imbiss41
more info

[znw-test]

Have you ever tried setting resolution to twice devicePixelRatio

const app = new PIXI.Application({
  width: canvasWidth,
  height: canvasHeight,
  backgroundColor: 0x1099bb,
  resolution: 2 * window.devicePixelRatio,
});

[imbiss41]

8 minutes ago, znw-test said:

Have you ever tried setting resolution to twice devicePixelRatio

const app = new PIXI.Application({
  width: canvasWidth,
  height: canvasHeight,
  backgroundColor: 0x1099bb,
  resolution: 2 * window.devicePixelRatio,
});

Hey, yeah I have tried all kinds of different values for it. 2x, 10x, 0.5x, it affects things in other ways but doesn't affect the blur specifically