Improving general image rendering quality (Resolution changes having no effect)

[BenjaminIrwin]

Can anything be done to further improve image rendering quality? (I can see work has already been done here #244).

My image quality doesn't change when I increase the resolution setting from 72 to any of the higher levels.

Here are two screenshots demonstrating the dip in image quality vs other browser image editing software (Photopea and Sketch.io):

In both cases the Minipaint resolution is set to 600 but as you can see that its image is fuzzier/more pixelated than alternatives. I am working with a 2560 × 1600 Retina display on the latest version of Chrome.

[viliusle]

Hello,
we already use ctx.imageSmoothingEnabled = true; for big images when zoomed in.

Other apps probably is resizing images in background and showing that, instead of real scaled image, but it can slow browser based app when working with big images.

But in your cases I see very big difference, original is clear, miniPaint shows blurry image, I suspect something is really wrong here. But first I need you to share original image, your computer OS, browser name and version. Also make sure you compare image with same zoom level. After that we can debug it.

[BenjaminIrwin]

Hi, thanks for the response.

Original image: https://effigis.com/wp-content/uploads/2015/02/DigitalGlobe_WorldView2_50cm_8bit_Pansharpened_RGB_DRA_Rome_Italy_2009DEC10_8bits_sub_r_1.jpg
Computer OS: macOS Monterey Version 12.2.1
Browser name: Google Chrome
Browser version: 105.0.5195.125 (latest)

I know the image is very big, but the same quality loss happens with any image in my experience (big, medium or small). And yes images in example above are at the same zoom level. Let me know if there is any other information you need.

[viliusle]

I suspect your browser window (not miniPaint zoom) is zoomed in. You have to keep it at 100% zoom.

[BenjaminIrwin]

The zoom is normal (100%). I just double checked this.

I also tried Minipaint on a friend's computer and the quality was much better than what I was used to on mine (superior to photopea).

So it seems it is something to do with my device.

[viliusle]

I tested your image in windows PC, it looks sharp and good on miniPaint, no difference between IrfanView and miniPaint on 100% zoom. Something is wrong with canvas rendering on your computer. Try different browser. Or it can be related to macOS,
Maybe yo have scaling enabled on OS level?

Can somebody else test it on macOS?

[BenjaminIrwin]

So I just plugged my macOS computer into a monitor and the minipaint image quality is great on the monitor. So strange.

I move the minpaint window back to my mac screen and the quality gets worse. Please see the attached screenshots. Exactly the same window - I just move it from my Mac display to the external monitor, without changing anything.

Mac Display:

Monitor display:

[Giwayume]

I mentioned this before, but minipaint does not take the browser's dpi scaling into account when drawing the canvas. If you use a 4k monitor and change the Windows DPI settings to 200%, for example, minipaint will attempt to draw at 1080p instead of the full 4k of the monitor. This is because the web browser tells the web page that it has a resolution of 1080p, even through for every 1 pixel in CSS it is actually drawing across 4 pixels on the monitor.

To solve this, when creating the display canvas, multiply the canvas resolution by window.devicePixelRatio.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

[viliusle]

Window/devicePixelRatio

I remember it now, but I can not remember why it was not implemented. I will check if we can do it easily.

[viliusle]

ok, it can be fixed. Image quality can as good as original in any scale. I already have that.

But in that case most of tools and features must be rewritten to also calculate scale changes.

So for now it will not be done, because it would probably require to rewrite all app, and not lots of people are have this issue.

Status: will not fix.