Legend looks blurry, allow rendering it at higher resolution

[laundmo]

When rendering the legen on one of my monitors, it looks blurry.

Heres a screenshot of what it looks like next to some HTML text and also with my mouse overlaid:

I managed to make it look much better by zooming in, refreshing the page, and then zooming back out:

This makes be belive that the legend is rendered at an insufficient or odd scale/resolution. I'd love a option to set a factor in the constructor, which would allow me to opt-in to rendering the legends at higher resolutions.

I found references in the code to DEVICE_PIXEL_RATIO which was used to scale some things. For reference, heres the value of ol.has.ol.has.DEVICE_PIXEL_RATIO from the first and second screenshot:
Without Zoom: 1.090
With Zoom: 2.2222

[mike-000]

The OpenLayers map defaults to the device pixel ratio when it is constructed. Browser zoom increases the device pixel ratio but does not change an existing map. If necessary you could construct a map to allow for an increase in browser zoom, for example:

  new Map({
    pixelRatio: Math.max(DEVICE_PIXEL_RATIO, 2),
    ...
  });

For the same reason you would not see the advantage of using retina tiles in the OpenLayers examples https://openlayers.org/en/latest/examples/?q=retina if you used broswer zoom after opening those maps.

[Viglino]

The OpenLayers map defaults to the device pixel ratio when it is constructed.

The device pixel may depend on the screen you are using (when creating the map). That's why it seems blury on one of my monitors and fine on the others.

[Viglino]

@mike-000 It seems you follow the repo on ol issue, so I'm sending you an invite to collaborate on it. It might be useful just in case.

[laundmo]

If necessary you could construct a map to allow for an increase in browser zoom, for example:

I feel you may have misunderstood: both screenshots are taken at 100% (no zoom). The issue is that just the Legend, and nothing else, is blurry. I don't want to increase the pixel ratio for the entire Map. I just want a non-blurry Legend at no zoom.

[mike-000]

I don't want to increase the pixel ratio for the entire Map

By zooming in, refreshing, then zooming out again you were setting the map pixel ratio to 2.2222 instead of 1. The resulting larger map canvas size (scaled to css pixels by a style transform) made the output less blurry. That might be because of better pixel alignment and less interpolation.

[laundmo]

The resulting larger map canvas size (scaled to css pixels by a style transform) made the output less blurry.

I understand that, i thought you were recommending i just set the pixel ratio for the entire map to 2, sorry.

I dont know whether you'd call this issue a feature request or a bug report, but ultimately i'd like a solution which doesn't affect the rest of the map. My idea was a pixel ratio setting for just the Legend, but that's all it is, an idea. Maybe it could even make sense to display at least the text using HTML - the DOM structure is already being created by something, but it looks like its only for accessibility.

[Viglino]

The legend is drawn at the same pixel ratio as the map... (using ol.has.DEVICE_PIXEL_RATIO)
The result should be sthe same on the map but more visible on a white background.

Pixel ratio = 1

Pixel ratio = 1.5

[laundmo]

I'll have to try some more things, but purely visually, the Legend looks quite blurry while all the things i have on the map look good.

Is it possible that maybe theres some small difference between the manual usage of the Canvas API in Legend and what openlayers does internally, which are only noticeable on some devices?

Looking at the Legend example on my phone, its rendered at a much higher pixel density compared to the display, which implies it depends on something specific. I'll test it on another machine and compare the examples to my own code (should have done that in the first place, sorry) and get back to you.

[Viglino]

Pixel ratio depends on the device, smartphone has pixel ratio > 1.
If you have multiple monitors, they may have different pixel ratio. When you create a map on one monitor, it may look blurry when you move the screen to another.

[laundmo]

If you have multiple monitors, they may have different pixel ratio. When you create a map on one monitor, it may look blurry when you move the screen to another.

Thank you, this was a good hint: i found that the "scale" setting in Windows is what causes the blurriness (setting found here). Below is a screenshot, taken on a device with the exact same display model side-by-side, with the left one set to a scale of 125%.
Corresponding with this, the ol.has.DEVICE_PIXEL_RATIO for the left monitor is 1.25 and for the right monitor its 1.
Zooming in you can compare and notice that compared to the features on the map and the HTML content, the left legend is more blurry.

(note: sadly the only 2 exact same models of display i have max out at 1680x1050, hence the comparatively low resolution screenshot)

It seems that there's some part of the Legend rendering which doesn't use DEVICE_PIXEL_RATIO like OpenLayers does. For easier comparison, here's the car icon side-by-side with the legend (no scaling performed during image editing).

125% screen:

100% screen:

You can see that, while the 100% image has a lower resolution (as everything is displayed smaller), on the 100% screen the amount of pixels matches between legend and map, while on the 125% screen there's a mismatch between legend and map.

Interestingly, mainly 125% has a blurry legend issue - I've tried 150% and 175% as well and both look better.