HiDPI with Emscripten and GLFW

Version/Branch of Dear ImGui:

Version 1.90.5

Back-ends:

imgui_impl_glfw.cpp + imgui_impl_opengl3.cpp

Compiler, OS:

emscripten 3.1.57

Full config/build information:

No response

Details:

I searched a lot but I did not find something satisfactory to work with HiDPI in the contexte of ImGUI/emscripten/GLFW. I rewrote a part of my code to insert a scaling factor, for example by 2, then create a glfw window twice the size, as well as for the viewport. I rescaled fonts as well as the addRect/addline/addEverything I used in custom widgets. Then I display all and I get a really better quality. Unfortunately : the mouse now does not work, I guess it behaves as if the image was not downscaled by a factor 2. What should be the good practice in this context ? Best Regards, Mike

Screenshots/Video:

No response

Minimal, Complete and Verifiable Example code:

No response

I was having a similar problem and solved it by following these steps:

Create two js functions that return the width and height of the window:

get_web_window_width: function(){
return window.screen.width;
},
get_web_window_height: function(){
return window.screen.height;
},

Call them from my project ( using https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#implement-a-c-api-in-javascript) to construct the GLFW window:
```
window_width = get_web_window_width();
window_height = get_web_window_height();
GLFWwindow* glfw_window = glfwCreateWindow(window_width, window_height, "Gaps", nullptr, nullptr);
```
Set my window size to those values: ImGui::SetNextWindowSize({static_cast<float>(window_width), static_cast<float>(window_height)});
Calculate a scaling factor based on the browser's window width and a reference width I used for determining where I place objects on a standard 1080p diplay:
```
int original_width = 1920;
float scale_factor = (float)window_width / original_width;
```

I then multiply all my font sizes and widget locations by this factor:


ImFontConfig small_font_config;
small_font_config.SizePixels = (22 * scale_factor);
ImGui::SetCursorPos( {55*scale_factor, 30*scale_factor});
ImGui::TextColored({0,0,0,1}, "%s", "gate");


- Removing `image-rendering: pixelated;` from the shell_minimal.html file fixed the bluriness when using windows DPI settings above 100%.
- I think you could use another js function that gets the actual DPI settings, with `window.devicePixelRatio` if you wanted to scale your widgets accordingly. With the steps I wrote here I get the same look and sizes at 100% and 125% DPI's. But they don't look blurry.

ocornut / imgui