Kinetic.js — изображения не отображаются

Я создаю приложение, которое должно отображать различные типы графиков. Нужно показать два или более изображений, расположенных в соответствии с оценками, которые набрал пользователь. Ладно, это не имеет отношения к проблеме. Поэтому я написал плагин jQuery, который получает значения через json для рисования графиков.

Плагин сначала вызывает функцию, которая рисует линии графика (работает), другая функция рисует сетку за графиком (тоже работает).

Теперь проблема: основная часть перебирает массив значений и добавляет объекты Kinetic.image в слой, который возвращается и добавляется на сцену.:

$.each(this.data, function(key, value) {
            $.each(value, function(secKey, secValue){
                secValue.X = Math.floor((secValue.X - minX) * scaleX) + xOffset;
                secValue.Y = Math.floor(yOffset + ((minY - secValue.Y) * scaleY));
                coords.push(secValue);
            });
        });

        $.each(coords, function(key, value){
            var imageObj = new Image();
            imageObj.src = value.image;
            imageObj.onload = function() {
                var image = new Kinetic.Image({
                    x: value.X,
                    y: value.Y,
                    image: imageObj,
                    width: 180,
                    height: 180
                });

            // add the shape to the layer
            pictures.add(image);

            };
        });

        return Array(pictures, popup);

В конце визуализированная страница имеет 4 объекта холста. А также, когда я console.log() на сцене, в ней есть слои для графика, сетки, изображений и всплывающих окон, но изображения не отображаются. Источники изображений доступны. Проверял это несколько раз.

Кто-нибудь подскажет, где может быть проблема.?

Заранее спасибо.

Матиас