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.