search

embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
904 stars 315 forks source link

Question relating to saveData #12

Closed clark-rob closed 5 years ago

clark-rob commented 5 years ago

Hey there! First want to say, this package is really great! Easy to follow and understand, especially for a junior developer. So, thank you.

My question is if you have ever come across this error:

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

I am showing multiple <CanvasDraw/> components that contain the props saveData that all equal a different drawing. These are all found on one route, and this error appears in the console once I change to another route in my application. The error does not affect the application, I am just seeing if I can clean up the error message. Thanks in advance for any help.

embiem commented 5 years ago

Hey, thanks! Glad you like it.

Do you also use the imgSrc prop on any of the CanvasDraw components?

If this error happens when you switch routes, it's may have something to do with the drawImge function being called once the image is loaded, even though the canvas has already been destroyed. I'll have a look whether this might be the problem.

clark-rob commented 5 years ago

I currently am not using the imgSrc prop on any of the components.

I had the same feeling that the drawImage function is trying to create a canvas that, as you said, was destroyed on the route switch. It has been a brain teaser trying to figure out the error, but I am determined. Thank you for responding and helping me out. I greatly appreciate it.

laeckerv commented 5 years ago

Just realized my PR #13 might fix this

nmkname commented 5 years ago

Same issue, but, in my case, its little bit affecting performance. I placed canvas on top of the images, to let users remember their order by drawing lines on them. And then, when canvas is unmounted the same errors appear.

embiem commented 5 years ago

Thanks @laeckerv for your PR. I just merged it. @nmkname & @clark-rob could you please check whether the just merged PR fixes this error for your use cases?

Please use the current master branch to test, I have not pushed a new version to npm yet.

clark-rob commented 5 years ago

Awesome! Thanks @embiem, I will definitely check the new merge. And also, thank you @laeckerv , I do hope this will fix my issue. Sorry about the delayed response time.

issac1024623 commented 5 years ago

wonderful package. Thanks for you contribution. One thing I cannot achieve it, I cannot export the canvas img and background together to base64 Do I need to use the this.saveableCanvas.getSaveData() to re-create a img? Please Help. Thanks