Noté que la imagen comienza a dibujarse en el lienzo (la imagen de carga lleva tiempo) después de que el texto se ha dibujado en el lienzo (en un bucle), ¿cómo lo hago? Quiero que se dibujen el texto y la imagen antes de ejecutar otro.

( Como quiero que sea. )

( pero como lo entiendo )

 Object.values(results).map(async listArray => { //clear to draw new data to the canvas ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.drawImage(image, 0, 0, image.width, image.height) var im = [] listArray.map(async data => { if (validBase64Image(data?.text)) { im = new Image() im.onload = () => ctx.drawImage(im, data?.x, data?.y, 100, 100) im.src = data.text } if (!validBase64Image(data?.text)) { ctx.fillText(data?.text, data?.x, data?.y) } }) downLoadWithCsvTitle(canRef, listArray?.[0]?.text)// download canvas }) } ```