Custom brushes not working as expected on mobile 4.6.0

[kawka-maciej]

Hello! In my project I was trying to use some custom Fabric brushes from here. They work on the desktop but the problem appears to be on the mobile. Below are some gifs to demonstrate the difference
Default pencil brush:

Custom brush:

As you can see, the final drawings is moved. Could anyone hint me what needs to be adjusted in order for the custom brush to work on mobile as well?

[kawka-maciej]

I browsed some code of the default brushes in Fabric.js and came to the conclusion that to ensure the same behaviour across desktop and mobile, the custom brush that I mentioned above needs to be adjusted to use the Fabric API directly to draw the brush path.

The current problem with the implementation there was that it used the canvas context directly to draw the brush path, which caused the weird behaviour on mobile (as on the gif above). The default implementations that I browsed uses a different strategy: the preview path was drawn directly to the canvas (one of the two that Fabric uses) and then the canvas is cleared and the changes are applied directly using Fabric API ( as here, the spray path is recreated using fabric.Rect objects, the used context is cleared.). I adjusted my implementation to use the strategy and it seems to work. Although I still don't know where this difference in behaviour comes from.

[ShaMan123]

look into retina scaling