canvas.toDataURL() returns image with width 4 times and height 2 times bigger about react-native-canvas

Ok, i researched the sources and found reason. The problem is that autoScale function is called twice - one time when we set width for canvas and second time when we set height. I fixed locally by removing this.autoScale() call from width and height setters and made this function public by adding it in Canvas.js:

(0, _webviewBinders.webviewMethods)(['toDataURL', 'autoScale'])

Then i set width and height of canvas in the following way:

this.canvas.width = 600;
this.canvas.height = 800;
this.canvas.autoScale();

[iddan]

It makes sense. To render in high resolution in IOS and Android react-native-canvas multiplies the canvas sizes by the device screen ratio so you must be using a device with a ratio of 2 and that's why you get an image two times larger than you expect.

Is this an issue for you? I think it's fixable but it won't be easy.

Hope that helps. Thanks for using react-native-canvas and reporting this issue.

@iddan Hello again. Thank you for your quick response.

It seems final image is scaled 2 times than canvas size as you said. It's ok for me. But the problem is in another spot. By some reason canvas is resized in width and becomes 2 times bigger that leads to the following results:

This is how image looks in canvas:

And this is final image after canvas.toDataURL() call:

Could you point me how to fix that behaviour please?
Thanks in advance

[iddan]

Cool, this is a good lead for a fix

[spaceemotion]

Got the same problem today - "fixed" it by cropping the final image.
Any updates on when a fix is in sight? Cheers!

[iddan]

Hey there. As I said before PRs are welcome. Currently I don't use this feature with a product and too busy to solve in my (non-existing) free time.

[iegik]

const handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    console.log(canvas.width, canvas.height)
    ctx.fillRect(0, 0, canvas.width, canvas.height);
};
...
<Canvas ref={handleCanvas} {...{width: 300, height: 400, style: {width: 300, height: 400}}}/>

On screenshot you can see, that size of rendered canvas did not match on iOS.

https://github.com/iddan/react-native-canvas/blob/master/src/Canvas.js#L13

[iddan]

The sizes of the canvas should be in IOS twice the actual size to make things complaint with retina. But if I understand correctly it doesn't behave like that on your device.

[iegik]

Yes, i think, it abut to boundaries of 300x150... default properties of webView?

[iddan]

Yeah

[mohammadFeiz]

hi , how can i set canvas width and height ? when i set canvas.width = 400 and canvas.height=600 in emulator nothing render and that will white screen

[iddan]

Please open a new issue.