javascript – Como o método append funciona em um loop

Estou desenvolvendo uma aplicação web que demanda de um grande loop de inserção de imagens em um Canvas HTML, no entanto como sabemos, a função onload aguarda o loop terminar para que enfim o código possa interpretar o onload. O que fiz para reverter essa situação foi fazendo o .append() do script sempre que o loop desse uma volta. Até então parecia que funcionaria, mas o resultado que tive prova que estou errado, pois apenas a primeira e ultima imagem foram adicionadas.

Vou resumir a estrutura do meu loop para que seja breve a interpretação:

for(var i = 0; i < preset.template.nF; i++){
    $('body').append(`
       <script>
          imagem`+i+`.onload = function(){
               ctx.drawImage(imagem`+i+`, x, y, widthImagem, heightImagem)
          }
          imagem`+i+`.src = arrayReceiveImage(i)
    `)
}

Gostaria de saber se o que estou fazendo pode dar certo, ou deveria tentar fomular um código parecido com está solução: Problema de loop drawImage canvas

Todas variáveis inseridas acima recebem valores do nosso banco de dados, nenhuma delas estão vazias!

Antes que digam que o problemas está na falta de fechamento da tag script, já vou dizendo que ao fechar ela, acabo fechando a primeira tag script, fazendo quebrar o código, deixando assim o próprio navegador insere o fechamento da tag.