Почему на канвас не добавляется больше 2х картинок?

Question

[coderisimo]

- вот тест проект
https://codepen.io/coderisimo/pen/zEdGzo?editors=1011

вот такая штука. сделана с целью сшивать загружаемые файлы в один, перед отправкой на сервер.
первый этап - смерджить разные файлы в одну картинку на канвасе работает увы частично. Только 2 картинки. 3-я пропадает.

var canvas = document.getElementById('images-canvas');
    var context = canvas.getContext('2d');
    var filesImages = [];
    var imagesForCanvas = [];
    canvas.height = 0;
    canvas.width = 0;

    $('body').on('change', '#images-files', function () {
        processFiles();
    });

    function processFiles() {
        var files = $("#images-files").prop("files");
        for (var f = 0; f < files.length; f++) {
            filesImages.push(files[f]); //помещаем файлы в  массив
        }
        addFileToCanvas(); // функция будет вызываться рекурсивно
    }

    function addFileToCanvas() {
        if (filesImages.length) { // если не все файлы  гтовы для добавления на канвас продолжаем их помещать в спец массив
            var reader = new FileReader();
            reader.onload = function () {
                img = new Image();
                img.src = reader.result;
                img.onload = function () {
                    imagesForCanvas.push({img: img, title: tmp.name, height: img.height, width: img.width});
                    canvas.height += img.height;
                    canvas.width = img.width > canvas.width ? img.width : canvas.width;
                    addFileToCanvas(); // привет рекурсия!
                }
            }
            var tmp = filesImages.pop();
            reader.readAsDataURL(tmp);
        } else { // все файлы готовы к добалению на канвас. начинаем отрисовывать
          //  console.log(imagesForCanvas);
            for (var i = 0; i < imagesForCanvas.length; i++) {
                var currentImg = imagesForCanvas[i];
                var topPos = i === 0 ? 0 : imagesForCanvas[i - 1].height; // определяем координату по высоте
                context.drawImage(currentImg.img, 0, topPos); //добавляем файл на канвас
            }
        }
    }

есть идеи? спасибо

Answer 1

[Михаил]

А кто будет в topPos прибавлять высоту предыдущего изображения, что бы они не рисовались друг на друге?

var topPos = 0;
     for (var i = 0; i < imagesForCanvas.length; i++) {
       var currentImg = imagesForCanvas[i];
       context.drawImage(currentImg.img, 0, topPos);
       topPos += imagesForCanvas[i].height;
     }

Comments

[coderisimo]

Да да , вы правы.
Тоже обнаружил сей косяк ))
Спасибо!

var topPos = i === 0 ? 0 : topPos +  imagesForCanvas[i - 1].height; // определяем координату по высоте