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.