canvas.toDataURL() returns a transparent image

Hi, I have had a question about this too.

These methods return a promise, as you can see, so you would need to wait for it to resolve before the variable can be populated.

However, in my case the promise never actually got resolved. Here is a link to my issue: https://github.com/iddan/react-native-canvas/issues/25

If you haven’t already try rewriting with async as suggested by @iddan.

You read the canvas before it was drawn. Your code should be:

	handleCanvas = async (canvas) => {
		canvas.width = 600;
		canvas.height = 800;
		const ctx = canvas.getContext('2d');

		var photo = new CanvasImage(canvas);
		photo.src = 'data:image/jpg;base64,' + this.state.image;
		photo.addEventListener('load', () => {
			ctx.drawImage(photo, 0, 0, 600, 800);
		});

		var watermark = new CanvasImage(canvas);
		watermark.src = '/img/watermark.png';
		watermark.addEventListener('load', async () => {
			ctx.drawImage(watermark, 85, 220, 107, 46);
                        const image_new_uri = await canvas.toDataURL()
		        this.setState({ image_new_uri });
                        console.log(image_new_uri)
		});
	}