javascript - Kinetic を使用してキャンバスに画像を追加する

Question

アプリを作成していますが、問題に遭遇しました。ボタンを押したときに、キャンバスに新しいポイント (画像) を追加する必要があります。コードは次のとおりです。

var ID = 0;
var points = [];

function addPoint(){
points.push({id: ID, posX: 0, posY: 0, url: "img/point.png"});
ID++;
showPoints();
}

function showPoints(){
var img = new Array();
var point = new Array();
var stage = new Kinetic.Stage({
    container: 'cvsCroatia',
    width: 574,
    height: 508
});
var layer = new Kinetic.Layer();

for(var j=0; j < ID; j++){
    img[j] = new Image();
    img[j].src = 'img/point.png';
    img[j].onload = (function(){
        point[j] = new Kinetic.Image({
            x: points[j].posX,
            y: points[j].posY,
            image: img[j],
            width: 13,
            height: 13,
            name:  img[j],
            draggable: true
        });
    });
    layer.add(point[j]);

}   
stage.add(layer);
}

しかし、私はエラーが発生しました:

キャッチされていない TypeError: 未定義のプロパティ 'index' を設定できません (kinetic-v4.4.0.min.js:29)

何が悪いのですか？回答ありがとうございます。アラン..