Shapes with opacity do not correctly apply layer pixelRatio and can appear blurry on zoom in about react-konva

[lavrton]

I see now.

Shapes with (1) stroke and (2) fill and (3) opacity are rendered via special "buffer render". More about this behavior here: https://konvajs.org/docs/performance/Disable_Perfect_Draw.html

There are two solutions for your issue:

1. First, you can just follow the tip from the documentation and disable "perfectDraw".

2. Or you can just update pixelRatio of the stage's buffer canvas:

layerRef.current
        .getStage()
        .bufferCanvas.setPixelRatio(window.devicePixelRatio);

[lavrton]

Why are you changing pixel ratio?

On don't see any blur in MacOs on Chrome. What is your system?

[florton]

@lavrton The layer pixel ratio does not automatically update when the user zooms in or out with the browser. Without changing it, all the shapes will be blurry in the examples if the page is zoomed in. I am using chrome on windows.

Can you confirm that on the codesandbox example, you zoomed out all the way, clicked refresh in the browser preview tab, and then zoomed all the way in. I can reproduce the issue consistently.

[florton]

@lavrton Thank you for the information, updating the stage bufferCanvas and the layer pixel ratios fixed the issue 👍

An alternate solution I found was removing opacity and instead using hex colors with alpha values for stroke and fill.