vinothpandian/react-sketch-canvas

[Bug] A blank white space appears when erasing the canvas

jaballogian opened this issue · 8 comments

jaballogian commented

Describe the bug
A blank white space appears and covers the middle to the bottom section of the canvas when erasing the canvas.
Here is the video https://www.awesomescreenshot.com/video/13450607?key=caaf718794e5b4e01723f8472a025b6d

To Reproduce
Steps to reproduce the behavior https://www.awesomescreenshot.com/video/13449258?key=45a625eae8aa43585ed4d2f5a3f89d72:

  1. Open this codesandbox https://codesandbox.io/s/forked-learn-react-sketch-canvas-r7xphg?file=/src/Demo.jsx
  2. Create some scratches to the canvas (using the default/initial conditions).
  3. Change the color of the scratch by clicking the "Select Color" button.
  4. Create some scratches to the canvas again.
  5. Change the stroke type/width from regular to bold by clicking the "Select Stroke" button.
  6. Create some scratches to the canvas again.
  7. Change the stroke type from bold to the eraser.
  8. Create some scratches using the eraser on the canvas.
  9. Sometimes the bug (blank white space) appears here. If not, please continue trying by repeating the steps above again.

Expected behavior
No blank white space appears.

Screenshots
(Attached above).

Desktop:

  • OS: tested on Windows 11 and macOS Monterey 12.4
  • Browser: both OS are tested on Chrome 108 also Edge on Windows

Smartphone (please complete the following information):

  • Device: not tested yet
  • OS: not tested yet
  • Browser not tested yet

Additional context
If we export the canvas to an image file (by clicking the "Save" button), the exported image has no blank white space inside it.
image

In the codesandbox above, I have copied and pasted your code from the example folder to the App component but I didn't find any issue.
image

vinothpandian commented

@jaballogian Thanks for logging it with a lot of details. It's very helpful! I'll try to come up with a fix in v7. In the meantime, if you find a fix, please send a PR.

  • 👍1
dominiczy commented

@jaballogian @vinothpandian I'm experiencing the same bug here - any update on this issue? (or on when to expect v7?)

vinothpandian commented

Hey @dominiczy, I don't have a fix yet. I'll have time to try a fix after a couple of weeks.

  • ❤️1
vinothpandian commented

@jaballogian, @dominiczy This is fixed with react-sketch-canvas@7.0.0-next.2

You can pass withViewBox attribute to ReactSketchCanvas component. Let me know if this works for you otherwise we can reopen the issue.

  • 🎉1
dominiczy commented

@vinothpandian doesn't seem to work for me yet. Or is setting the withViewBox attribute required to fix this issue?

vinothpandian commented

Hey @dominiczy, You have to set withViewBox to fix this issue.

dominiczy commented

@vinothpandian humm I previously forked the repo (https://github.com/dominiczy/traverse-sketch-canvas) because I needed to do a coordinate transformation in order to use the sketch canvas inside a component scaled down by CSS (I use it to allow drawing on mindmaps for https://traverse.link/). I already added viewBox support to my fork, and now I copied in your code from e28c63f which adds the withViewBox feature, but I'm still getting the issue.
Sorry this might be a bit complicated to but maybe you have any ideas on how it could be solved?

vinothpandian commented

Hey @dominiczy, I'm not sure why you are still facing this issue.

I replicated the demo from the issue over here.
https://codesandbox.io/s/forked-learn-react-sketch-canvas-olcedp?file=/src/Demo.jsx

Can you check by opening the link

  1. Scribble something on the canvas
  2. Click on Load paths button to load some additional paths
  3. Toggle withViewbox on and off.

You will see that when withViewBox is false, you'll get a blank white space and it won't appear when withViewBox is true.

I just noticed an additional issue with viewbox on load paths, I'll track that over here #114