flyover / imgui-js

JavaScript bindings for Dear ImGui using Emscripten and TypeScript
https://flyover.github.io/imgui-js/example/
MIT License
962 stars 103 forks source link

High DPI (HiDPI) canvas support #44

Open joedf opened 3 years ago

joedf commented 3 years ago

Impressive work! However, it looks blurry on a 4k screen. I think this may be related to #14 and could resolve it. https://www.html5rocks.com/en/tutorials/canvas/hidpi/

I had this issue with software I was working, and this is the simplest solution I ended up using.

this.canvas.width = e.width * window.devicePixelRatio;
this.canvas.height = e.height * window.devicePixelRatio;
this.canvas.getContext("2d").setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);

Essentially, you render it in the canvas at double resolution (using a transform, double the size of the document element) and scale the document element down to the desired size.

Or even easier, you can just include a polyfill like this one: https://github.com/jondavidjohn/hidpi-canvas-polyfill