KineticJS - replacing image within a group -

please see link

when canvas loads there 2 images: yoda , darth vader.

i want able click on yoda (to select it) , click on "change" button under canvas. button click should replace yoda darth vader , still keep "2nd" darth vader selected.

my code follows:

  function replaceimage(i, callback) {        selectedgroup.destroy();        var images = {};       images[i] = new image();       images[i].onload = function() {           callback(i,images);       };       images[i].src = sources[i].path;       }   

i tried selectedgroup.removechildren() , adding image manually doesn't work either - ie

function replaceimage(i) {        selectedgroup.removechildren();        var image = new image();          var newimage = new kinetic.image({             id: i,             image: image,             x: 0,             y: 0,             width: sources[i].width,             height: sources[i].height,             name: 'image',             stroke: 'red',             strokewidth: 2,             strokeenabled: false                   });          newimage.src = sources[i].path;         selectedgroup.add(newimage);                     }   

can see doing wrong?

thanks help!

instead of destroying yoda object , creating new vader object, how using setimage replace yoda image vader image?

something like:

// image object selected group var imageobjects = selectedgroup.get("image"); var imageobject=imageobjects.toarray()[0];  // keep kinetic.image object // replace image imageobject.setimage(mynewimage);