Tracking changes of devicePixelRatio

[heguro]

Currently, Konva sets the pixelRatio (canvas scaling factor) by referencing window.devicePixelRatio at the initial rendering by default, but does not adjust to subsequent changes in devicePixelRatio.
Therefore, the display of the konva stage becomes blurred when the browser's zoom level changes or when the browser window is moved to a display with a different DPI.
In the project I am involved in, we address this issue by redoing the setPixelRatio each time the devicePixelRatio changes.

examples: CodePen / CodeSandbox (with React)

Is it possible for this behavior to be implemented internally in Konva?

may related: #1620

[lavrton]

It may be a good idea to implement that. However, it may be a breaking change, and we should do it carefully because some users may prefer to manual control the pixel ratio of a layer.

Personally, I am not interested in the functionality right now, but I am very open to good Pull Requests.

[psychedelicious]

I just ran into this in my react app, and implemented something similar to @heguro's example.

In an effort to simplify my code, I found this hook that encapsulates the logic and provides some additional functionality: https://github.com/rexxars/use-device-pixel-ratio

const dpr = useDevicePixelRatio({ round: false /* maybe required for perfect scaling? */ });
useLayoutEffect(() => {
  Konva.pixelRatio = dpr;
}, [dpr]);

All konva stages in the app get the correct pixel ratio whenever the user changes page zoom.