Skip to content

Canvas rendering is blurry on Retina/HiDPI displays #217

@ghost

Description

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.

Image

To Reproduce
Steps to reproduce the behavior:

  1. Open Klecks on a Retina / HiDPI display (for example a MacBook display with devicePixelRatio > 1).
  2. Create or open a project.
  3. Look at the canvas at normal zoom / fit-to-screen.
  4. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions