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

Scale props for drawing on Canvas #86

Closed git4anand closed 2 years ago

git4anand commented 4 years ago

Hi there, i have faced the issue while using the react canvas component when i need to load a data onto a Canvas of different size. But drawing needs to remain same for a canvas of different size so if there is a props which can change the scale of drawing on canvas. Something like below:

const scale = Math.min( window.innerWidth / CANVAS_NEW_WIDTH, 
                            window.innerHeight / CANVAS_NEW_HEIGHT
                       );

And scale can be used in _loadSaveData()_ to keep the drawing as it is even after size is changed

YiyueMaggieMao commented 4 years ago

I believe the props to use are canvasWidth and canvasHeight - and the drawing should automatically rescale to the canvas width and height. Hopefully it helps!

YiyueMaggieMao commented 4 years ago

Oh one more note- canvasWidth and canvasHeight seem to only take numeric values like "200" or "300" (in pixels), so things like "200px" or "45vh" wouldn't work