Resize the canvas content based on the device screen / container width

[Angelo-Sterlo]

If I draw something on the canvas from a desktop device, when I upload the path on a mobile react-sketch-canvas, it cuts out a part of the drawing, showing only the top left corner of the content.

Canvas drawing from desktop:

Canvas Drawing from Mobile:

I'm currently working with Ionic-React/Typescript.

Is there a way to keep the content visible when changing the canvas width and height?

Thank you in advance!

[vinothpandian]

Hey @Angelo-Sterlo,

You can use the latest beta version to achieve this.

You'll have to pass withViewBox property to ReactSketchCanvas to make it resizable.

[Angelo-Sterlo]

I tried but I still have the same problem, if I draw something on the web version, it's cut off in the mobile version.
The same problem happens if I first draw on mobile, the web version shows it in the top left corner of the canvas.

Is there another solution? Any CSS class that I can use?

[vinothpandian]

That's strange. Maybe your issue might be related to #114. I'll push a quick fix for that soon.

As far as I know, the only solution is to set the viewBox property.

[dereklance]

@vinothpandian for me, the withViewBox property works to scale everything up/down on resize. but then when you add another stroke to the canvas after resizing, all strokes on the canvas "shift" and I encounter the same problem where the strokes all get cut off

[vinothpandian]

@Angelo-Sterlo @dereklance

Added a new issue to track this #117

[Angelo-Sterlo]

I've managed to make the screen orientation landscape, this helps to keep the aspect ratio of the canvas and the content fits perfectly, the problem is that I want to scale the entire view down, in order for the user to be able to draw on the canvas without scrolling up and down.
This causes the cursor on the canvas to shift when drawing as @dereklance said.

[GeoTimber]

Can anyone give any hints how this could possibly be fixed or if it is going to be really hard to fix?

I dont mind having a go but a little bit of background info could be usefull.

withViewBox works until you start to draw as described above

thank you anyway! 👏👏👏👏

[xjamundx]

You got a fork with those anywhere?

[GeoTimber]

You got a fork with those anywhere?

Unfortunately my setup didnt allow me to fork it easily and I am doing some other things, I also vaguely remember having to change the import paths a little bit to make it fit into my webpack cordova project with all the changes needed.

But here you have the code that I am using and works for me and allows rescale
reactSketchCanvas.tar.gz

[xjamundx]

Thanks for sharing, not working for me out of the box, but I'll keep poking at it, thanks! Maybe I've got the wrong values for viewBoxWidth/Height 🤔

https://github.com/vinothpandian/react-sketch-canvas/pull/178/files

[GeoTimber]

You can see it working here, click on the clapping hands to take a screenshot
https://checkin.dev.poqueiraweb.com/

and here is a video

screenCast-.10.mp4

[xjamundx]

Got it! Thanks for sharing the video. I just had already applied the zoom to the viewBox width/height instead of leaving it as the original size