javascript - Add more images on Canvas with Kinetic -

im making app, ve met problem. need when hit button add new point (image) on canvas. here code:

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); } 

but got error:

uncaught typeerror: cannot set property 'index' of undefined (kinetic-v4.4.0.min.js:29)

have got idea, wrong? thx answers. alan..

var img = new array(); // simplest solution make img visible outside function function showpoints(){     // var img = new array();        // here img local variable, visible showpoints() function     var point = new array();             var stage = new kinetic.stage({     container: 'cvscroatia',     width: 574,     height: 508 });