Freedrawing: blurry while drawing until mouse up

[cabaret]

Version

3.4.0

Test Case

Freedrawing example: http://fabricjs.com/freedrawing

Information about environment

Nodejs or browser? Browser
Which browsers? Chrome 77, Safari 13, Firefox 70

Steps to reproduce

Draw a line with the pencil or spray brush.

Expected Behavior

Line is not blurry while drawing.

Actual Behavior

Line is blurry while drawing and stops being blurry after releasing the mouse button.

[asturur]

Is because the upper canvas is not retina enhanced, using safari i suppose you are on apple product, and so when using the standard configuration the final draw looks better.

This will be solved in a future version of fabricJS that for now is tracked here:
#5746

[cabaret]

@asturur Thanks for your reply. We use Fabric extensively in our application and this bug keeps coming back in our user testing feedback. Is this something you would accept help with, something we can contribute to? Thanks!

[asturur]

can you show me a screenshot of how much is blurry, so that we are sure we are talking of the same thing?

[cabaret]

The blurriness is very easy to distinguish when using the spray brush. When the mouse button is released, the drawn line stops being blurry. It's harder to see when using the pencil brush but it's definitely there. It's easier to see when zoomed in.

Screen recording here: https://cloud.cupofco.de/P8ulGnBe

[cabaret]

Looking at #5746, if I understand it correctly, that PR fixes the upper canvas being retina-enabled but the mouse events don't currently scale with the new canvas scale. I would be glad to look at the issue and work with you on this, if you could give me some pointers on how to tackle the issue with the events.

[asturur]

Yes that PR is a mixed bag, the retina scaling only should be pulled out in a new PR so we can merge it.
Fixing the mouse pointer is easy, we just need to divide by the retina scaling factor.
Where to do this, exactly on what function now is not immediately clear.

Please fork the current master, create a branch, move there the retina scaling code and open a new pr, we can move from there.