Keeping shape's appearance after removing it from parent in Kineticjs -

my situation is, have shape (image) parent group. shape, group , other possible parents may have sorts of positions , transformations on them. when remove shape group , add layer, there easy way apply shape again make there no change, on screen?

what have done use getabsoluteposition, preserve position, need transformations, such rotation follow along too. in documentation, see getabsolutetransform, see nothing applying transform shape.

alright... here hacked code problem -- fiddle

so did? changed part of draw function kinetic.image reads follows: (you can download modified kineticjs4.6.0 here)

        drawfunc: function(canvas) {         if(this.overridetransform){             var m2 = this.getattr('overridetransform').getmatrix();             canvas.context.settransform(m2[0], m2[1], m2[2], m2[3], m2[4], m2[5]);         }         var width = this.getwidth(),         ... 

and set parameter overridetransform true along setting attribute overridetransform contains absolute transform before moving group layer... this

    document.getelementbyid('a2').addeventlistener('click', function() {         var yoda = yodagroup.get('#yoda')[0];         if (typeof yoda != 'undefined') {             var currt = yoda.getabsolutetransform();             yoda.moveto(layer);             yoda.overridetransform = true;             yoda.setattr('overridetransform',currt);         }         layer.draw();     }); 

and below complete code.

function loadimages(sources, callback) {     var images = {};     var loadedimages = 0;     var numimages = 0;     (var src in sources) {         numimages++;     }     (var src in sources) {         images[src] = new image();         images[src].onload = function () {             if (++loadedimages >= numimages) {                 callback(images);             }         };         images[src].src = sources[src];     } }  function initstage(images) {     var stage = new kinetic.stage({         container: 'container',         width: 578,         height: 400     });     var darthvadergroup = new kinetic.group({         x: 270,         y: 100,         draggable: true     });     var yodagroup = new kinetic.group({         x: 100,         y: 110,         draggable: true     });     var layer = new kinetic.layer({         x: 0,         y: 0,     });      layer.add(darthvadergroup);     layer.add(yodagroup);     stage.add(layer);      // darth vader     var darthvaderimg = new kinetic.image({         x: 0,         y: 0,         image: images.darthvader,         width: 200,         height: 138,         name: 'image',         id: 'vader'     });      yodagroup.add(darthvaderimg);     // yoda     var yodaimg = new kinetic.image({         x: 10,         y: 10,         image: images.yoda,         width: 93,         height: 104,         name: 'image',         id: 'yoda'     });      yodagroup.add(yodaimg);     stage.draw();      document.getelementbyid('a2').addeventlistener('click', function() {         var yoda = yodagroup.get('#yoda')[0];         if (typeof yoda != 'undefined') {             var currt = yoda.getabsolutetransform();             yoda.moveto(layer);             yoda.overridetransform = true;             yoda.setattr('overridetransform',currt);         }         layer.draw();     });      document.getelementbyid('c').addeventlistener('click', function() {         yodagroup.rotatedeg(90);         layer.draw();     });     }  var sources = {     darthvader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',     yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg' }; loadimages(sources, initstage); 

i loved challenge working! , @projeqht, used fiddle starting point