Canvas doesn't work properly on Firefox / Android

[dolmen]

I tried https://scribblediffusion.com/ on multiple devices (phone, tablet) with Mozilla Firefox, and drawing doesn't work properly:

• the initial image is not fully rendered: it looks like the image is randomly cropped on the right and on the bottom
• when drawing on a touch screen drawing doesn't follow the finger correctly. Well, sometimes it works, sometimes not.

[zeke]

Thanks for reporting.

See also #15

[pascalchevrel]

Hi,

If this result into being a Firefox bug in our canvas implementation, I would be happy to know more about it and see if we can get this fixed rapidly, don't hesitate to ping me if this is the case.

Regards
Pascal Chevrel
Firefox Release Manager

[zeke]

Thanks @pascalchevrel

initial image is not fully rendered: it looks like the image is randomly cropped on the right and on the bottom

☝🏼 This part is definitely not a Firefox issue. See #15

Not sure about the touch screen drawing though.

[MrMarble]

Hi! I don't think is a Firefox issue, I made this simple app a long time ago and is working fine on Firefox: https://draw-app.vercel.app (a sketch drawing example from scratch). It may be related to this issue vinothpandian/react-sketch-canvas#114

If you're open to contributions, I may have a look at it later

---

After a bit of a search, this is the problem: vinothpandian/react-sketch-canvas#112

Seems that the fix is only on the pre-release version of the library, updating react-sketch-canvas to the next tag fixes the issue

[zeke]

Yeah this is the issue: vinothpandian/react-sketch-canvas#54

The issue is marked as closed but I don't think it's actually fixed in the latest release of react-sketch-canvas:

https://www.loom.com/share/b804e56441d6494f96d24e83dd2634ed

[softyoda]

I have the same issue on firefox on windows and firefox for android. It's almost all white, and sometimes it displays half of the canvas

[zeke]

I think this was fixed by #31