Estoy creando bucles y combinando imágenes, pero simplemente obtengo un lienzo en blanco. Aquí está mi código:

 const canvas = createCanvas(1024, 1024); const numberOfSquares = Math.sqrt(imageFiles.length); const size = 1024 / numberOfSquares; var currentX = 0; var currentY = 0; for (let h = 0; h < numberOfSquares; h++) { for (let i = 0; i < numberOfSquares; i++) { loadImage('./images/0.png').then((image) => { ctx.drawImage(image, currentX, currentY, size, size); currentX += size; }); if (h === 9 && i === 9) { console.log(canvas.toDataURL()); // hardcoded value for testing } currentX += size; } currentX = 0; currentY += size; }

hay dos problemas

1. El canavas se registra antes de que se complete el bucle.
2. Cuando registro currentX y currentY simplemente obtengo

 102.4 1023.9999999999999 204.8 1023.9999999999999 307.20000000000005 1023.9999999999999 409.6 1023.9999999999999 512 1023.9999999999999 614.4 1023.9999999999999 716.8 1023.9999999999999 819.1999999999999 1023.9999999999999 ...

Nota: cuando lo pruebo con stroke, beginPath, rect, etc., funciona bien

EDITAR

Ver comentarios para respuesta

Aquí está el código actualizado por cierto

 const canvas = createCanvas(1024, 1024); const numberOfSquares = Math.sqrt(imageFiles.length); const size = 1024 / numberOfSquares; var currentX = 0; var currentY = 0; for (let h = 0; h < numberOfSquares; h++) { for (let i = 0; i < numberOfSquares; i++) { const image = await loadImage('./images/0.png'); const ctx = canvas.getContext('2d'); ctx.drawImage(image, currentX, currentY, size, size); currentX += size; if (h === 9 && i === 9) { console.log(canvas.toDataURL()); } } currentX = 0; currentY += size;