HiDPI Scaling

[patrickcorrigan]

I'm trying to make litegraph not look blurry on HiDPI displays. It looks great if I double the canvas size and then use css to scale it down. The problem is that interacting with the canvas no longer works as expected. I've tried scaling the context but that doesn't fix it.

Here is a canvas scaling function I've used.

https://gist.github.com/callumlocke/cc258a193839691f60dd

Any ideas on how to get this to work?

[jagenjo]

it is not easy as all mouse interaction should be fixed, I will give it a look in the future.

[patrickcorrigan]

Thanks, Jagenjo. I really appreciate that.

[mcejp]

It's really unfortunate that the browser cannot do this 'transparently', since it already has all the input in vector form.

[Miserlou]

Does anybody have any status updates on this? It's really such a shame, litegraph looks great on my old monitor, but looks awful on my laptop. Non-blurry canvases would breathe a lot of life into project.

[atlasan]

Hi there. As Javi said this need some nice refactoring. It should be looked in the code for all the .clientX, .clientY and .deltaX .deltaY (and a general check with all the mouse pointer and event occurencies). Than many of those should be incapsulated into a generic coordinates_from_events function, allowing eventually to scale the canvas.

UPDATE >> I just had a quick try with my 4k display. Litegraph was looking all right, than changing to 300% zoom (windows) actually it looks quite blurry. So i tried this:

function updateEditorHiPPICanvas(width, height) {
    const ratio = window.devicePixelRatio;
    editor.canvas.width = width * ratio;
    editor.canvas.height = height * ratio;
    editor.canvas.style.width = width + "px";
    editor.canvas.style.height = height + "px";
    editor.canvas.getContext("2d").scale(ratio, ratio);
    return editor.canvas;
}

Seems to work all right ^_^ Have a check with it. Probably the missing part was scaling the context too.

Before-After

[jagenjo]

Dont have much experience with HDPi devices, but just make the canvas bigger and the scale it with css, I guess that should work. Similar to what @atlasan said.

[Miserlou]

Heyyy, just tried that out and it actually makes the text way sharper. Connecting lines are still very fuzzy, and the text on group labels, and it seems to have a sizable performance impact, but at least the text is readable. Thanks @atlasan

This is going to be an issue for anybody using Litegraph on a Mac, so the project might want to implement this internally, or at least point to this solution in the docs somewhere.

Thanks again R

[ernestp]

Looks way too blurry for comfortable use. ~~Switching to DrawFlow.~~ Will try @atlasan suggestion.

[jagenjo]

Good for you

[ernestp]

Created merge request with fix/workaround for this issue https://github.com/jagenjo/litegraph.js/pull/355

[bergwerf]

I see a weird issue where the nodes and the text are crisp, but the connections (and also the "Group" block) is not. Makes no sense, in the HTML inspector I can see that the canvas is being scaled to my pixel ratio (2). I haven't investigated the code and I have no clue what is causing this, but maybe someone else can reproduce it. I was just checking out the demo page.