El culpable es el controlador de drawPicture onload Simplemente marcar una función como asíncrona usando el prefijo async no es suficiente. En su caso, la función debe esperar hasta que se cargue la imagen y dibujarla en el lienzo inmediatamente después.

Escrito tal como está ahora, los controladores de carga se activarían en algún momento después de su última llamada a la función:

 await ctx.putImageData(map, 0, 0);

Entonces, la forma correcta es dejar que la función devuelva una Promise , que se cumple tan pronto como se activa el controlador de carga.

 window.onload = async () => { const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let map; const drawPicture = async (image) => { return new Promise(resolve => { const img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0, 60, 60); resolve(); } img.src = `assets/${image}.png`; }); } await drawPicture('a'); map = ctx.getImageData(0, 0, 60, 60); await drawPicture('b'); await ctx.putImageData(map, 0, 0); }