-
Notifications
You must be signed in to change notification settings - Fork 108
Open
Description
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
Labels
No labels