search

embiem / react-canvas-draw

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

Loading from saveData doesn't work when height/width of original canvas was set to 100% #71

Open eTr0nic opened 4 years ago

eTr0nic commented 4 years ago

For my original canvas, I've set the canvasWidth and canvasHeight to '100%' which works well in and of itself. However, when saving the data and then loading it via the saveData prop on a different canvas, it does not draw at all. If you try to draw on the canvas you'll notice it constantly refreshes as it 'tries' to draw the saveData string, but it doesn't actually show up on the canvas itself.

If I change the canvasWidth/canvasHeight to some absolute value it works again, but it doesn't seem to play nicely with percentage units.

The canvas I eventually get the JSON string of to save: <CanvasDraw hideGrid hideInterface canvasWidth="100%" canvasHeight="100%" />

The new canvas I want to load the above onto: <CanvasDraw saveData="theJsonStringHere" hideGrid hideInterface disabled canvasWidth={48} canvasHeight={48} />

eTr0nic commented 4 years ago

I see this is because of how the scaling is determined. Proposing that on saving the width/height data, instead of grabbing from the prop values it determines the height/width based on the canvas Dom element itself.

embiem commented 4 years ago

That makes a lot of sense, thanks for reporting!

I agree with your proposal. Do you have time to take this one on and submit a PR?