Describe the bug
On Retina/HiDPI displays, the main drawing canvas appears to be rendered at CSS-pixel resolution instead of device-pixel resolution, so the editor output looks softer/blurry compared with what you would expect on a DPR > 1 screen.
To Reproduce
Steps to reproduce the behavior:
- Open Klecks on a Retina / HiDPI display (for example a MacBook display with
devicePixelRatio > 1).
- Create or open a project.
- Look at the canvas at normal zoom / fit-to-screen.
- The rendered image looks softer than expected, as if the viewport canvas is not using the full native backing-store resolution.
Expected behavior
The viewport canvas should size its backing store using devicePixelRatio (or equivalent HiDPI handling) and render sharply on Retina / HiDPI screens.
Screenshots / Videos
Not attached.
Please complete the following information:
- Device: Desktop / MacBook with Retina display
- OS: macOS
- Browser: Chrome / Safari / Firefox
- App version: current
main (d80d91d) / current hosted app
Additional context
A quick code check suggests HiDPI support is only partially wired up:
src/app/script/klecks/ui/project-viewport/project-viewport.ts already has useNativeResolution and scales resFactor from devicePixelRatio.
- But the main editor viewport in
src/app/script/klecks/ui/easel/easel.ts creates new ProjectViewport(...) without enabling useNativeResolution.
src/app/script/klecks/ui/project-viewport/preview.ts also explicitly passes useNativeResolution: false.
So it looks like the canvas backing store stays at CSS-pixel resolution in the main editor / preview paths, which would explain the blur on Retina displays.
If the lower-resolution path is intentional for performance reasons, it might still be worth exposing native-resolution rendering as an option.
Describe the bug
On Retina/HiDPI displays, the main drawing canvas appears to be rendered at CSS-pixel resolution instead of device-pixel resolution, so the editor output looks softer/blurry compared with what you would expect on a DPR > 1 screen.
To Reproduce
Steps to reproduce the behavior:
devicePixelRatio > 1).Expected behavior
The viewport canvas should size its backing store using
devicePixelRatio(or equivalent HiDPI handling) and render sharply on Retina / HiDPI screens.Screenshots / Videos
Not attached.
Please complete the following information:
main(d80d91d) / current hosted appAdditional context
A quick code check suggests HiDPI support is only partially wired up:
src/app/script/klecks/ui/project-viewport/project-viewport.tsalready hasuseNativeResolutionand scalesresFactorfromdevicePixelRatio.src/app/script/klecks/ui/easel/easel.tscreatesnew ProjectViewport(...)without enablinguseNativeResolution.src/app/script/klecks/ui/project-viewport/preview.tsalso explicitly passesuseNativeResolution: false.So it looks like the canvas backing store stays at CSS-pixel resolution in the main editor / preview paths, which would explain the blur on Retina displays.
If the lower-resolution path is intentional for performance reasons, it might still be worth exposing native-resolution rendering as an option.