Потому что в js когда ты пишешь
for (..) {
var canvas = ..;
}
на самом деле получается
var canvas;
for (..) {
canvas = ..;
}
То есть у тебя не создается на каждой итерации новая переменная canvas, понимаешь? У тебя всего одна переменная, и именно последнее присвоенное значение в ней и остается. А функция img.onload ссылается именно на нее. Тоже самое и с переменной img и context
Переменные в js через var объявляются на уровне функции, а не блока.
Эту проблему в будущем решит let. Ну а пока нужно использовать замыкания или любой другой способ, главное чтобы для каждого img.onload была своя переменная canvas.
Кстати, почему нельзя сразу отображать <img> и ресайзить его. Какую роль играет canvas?