Skip to content

High DPI (HiDPI) canvas support #44

@joedf

Description

@joedf

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions