canvas.toDataURL() returning a blank image.

[HarrYjagariya]

my code is :

handleRedCircle = async canvas => {
    if (canvas != null) {
      canvas.width = 400;
      canvas.height = 400;
      const context = canvas.getContext('2d', {preserveDrawingBuffer: true});
      if (this.state.passObj && this.state?.passObj.alphabets) {
        var images = {};
        {
          this.state.passObj?.alphabets?.map((item, index) => {
            images['img' + index] = new CanvasImage(canvas);
            images['img' + index].src = item.imageUrl;
            images['img' + index].addEventListener('load', async () => {
              return context.drawImage(
                images['img' + index],
                item.xCoordinate / 10,
                item.yCoordinate / 10,
                item.width / 10,
                item.height / 10,
              );
            });
          });
        }
        console.log('url : ', await canvas.toDataURL());
      }
    }
  };

@iddan please check.

[michaelmika]

Please use Code Blocks for Code formatting. This is not readable!

You are using images (and a Load Listener). You should check before calling canvas.toDataURL() if everything is already loaded and drawn to the canvas.

[ahmedhango]

here when i try save i get emty image
import React, {useCallback, useState} from 'react';
import {Text, View, TextInput, TouchableOpacity, Image} from 'react-native';
import Canvas, {Image as CanvasImage} from 'react-native-canvas';
import bas64bg from './src3/bas64bg';

export default function App() {
const [userText, setUserText] = useState('');
const [base64Image, setBase64Image] = useState(null);

const handleImageWithText = useCallback(
canvas => {
if (!canvas) return;

  const context = canvas.getContext('2d');
  canvas.width = 400;
  canvas.height = 400;

  const image = new CanvasImage(canvas);
  image.src =
    'https://upload.wikimedia.org/wikipedia/commons/6/63/Biho_Takashi._Bat_Before_the_Moon%2C_ca._1910.jpg';
  image.addEventListener('load', () => {
    context.drawImage(image, 0, 0, canvas.width, canvas.height);

    context.font = '40px Arial';
    context.fillStyle = 'black';
    context.textAlign = 'center';
    context.fillText(userText, canvas.width / 2, canvas.height / 2);

  });
  
  canvas.toDataURL('image/png').then(dataUrl => {
    console.log('bace', dataUrl);
    setBase64Image(dataUrl);
  });
},
[userText],

);

return (
<View style={{padding: 20}}>
<TextInput
style={{borderWidth: 1, padding: 10, marginBottom: 20}}
placeholder="enter the text"
value={userText}
onChangeText={setUserText}
/>

<TouchableOpacity
onPress={() => handleImageWithText()}
style={{padding: 10, backgroundColor: 'blue'}}>
<Text style={{color: 'white', textAlign: 'center'}}>save as Base64

{base64Image && (
<Image
source={{uri: base64Image}}
style={{
width: 200,
height: 200,
marginTop: 20,
backgroundColor: 'yellow',
}}
/>
)}

);
}