react-canvas-draw
react-canvas-draw copied to clipboard
embiem
Loading from saveData doesn't work when height/width of original canvas was set to 100%
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} />
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.
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?
