html5 - How to cache a whole layer right before dragstart and revert it back on dragend? -

i'm trying speed web app mobile devices little bit up, i'm stuck @ important part - caching. how possible cache entire layer right before user starts drag , revert usable kinetic.nodes when drag-action has stopped?

at moment start caching on

stage.on('mousedown touchstart', function(){ // caching})

but problem here is, user has perform second mousedown touchstart event "grab" cached image, which, of course, starts new caching.

in case questions be:

1. how can pass mousedown touchstart event cached image, user can drag 1 fluent movement?

2. how can speed caching? (it takes 1-2 seconds cached image appear. useful cache in setinterval after every, lets 4 secs, , use precached image or causes high performance drain?)

i highly appreciate kind of suggestions regarding problem or further tips&tricks speed things.

based on statement:

stage.on('mousedown touchstart', function(){ // caching}) 

i'm assuming on mousedown touchstart call layer.toimage() or stage.toimage() , want drag new image on 1 click/tap.

1. you can invoke drag event on new generated image using .startdrag() function: kinetic.shape#startdrag

   you can invoke .stopdrag() on mouseup touchend stop drag. kinetic.shape#stopdrag

   something like:

   var image, ox, oy;  stage.on('mousedown touchstart', function(){   // caching   stage.toimage({     width: stage.getwidth(),     height: stage.getheight(),     callback: function(img) {       var image = new kinetic.image({         image: img,         draggable: true       });       ox = image.getx();       oy = image.gety();       image.startdrag();     }               }); });  stage.on('mouseup touchend', function(){   image.stopdrag();    //calculate dx, dy update nodes.   var newx = image.getx();   var newy = image.gety();   var dx = newx-ox;   var dy = newy-oy;    var children = layer.getchildren();   (var i=0; i<children.length; i++) {     children.setx(children.getx()+dx);     children.sety(children.gety()+dy);   }    image.hide(); //or remove() or destroy()   layer.draw(); }); 

   note need update original nodes after dragging cached layer.

   another note haven't tested code believe along lines of i've got there.

   small update: should hide() original layer while dragging cached layer image! :) , show() again when hide cached image layer.

2. honestly i'm not sure how speed cache time unless can predict when user needs click/tap stage move. think suggestion cost more performance save.

   i'm guessing desktop caches image faster on mobile? might fall being limitation of kineticjs performance on mobile vs desktop...

update

okay, have idea #2, it's not fix might work better you.

1. separate stage mousedown event touchstart event. mousedown same touchstart want handle differently.

2. on stage touchstart want drag entire stage normal, meanwhile run code original mousedown cache layer.

3. when cached image finishes loading (takes 1-2 seconds say), use .stopdrag() on original stage , hide it. @ moment want store current x , y values of stage, can still calculate dx,dy. call .startdrag() on new cached image , continue on did mousedown.

how know when cached image finishes loading? think that's toimage() callback function for. if not, javascript onload event work determine when image finishes generating.

the end result you'll slow choppy drag on stage touch events until image cached. flip switch , stop dragging stage, start dragging cached image, , revert/update stage on touchend.

hope works semi-solution problem...

another update

okay here's idea might performance!

if stage isn't modifying nodes often, can pre-cache stage image it's generated, , .hide() it. when need drag it, need set x,y of cached image match stage's current x,y , .show() cached image. eliminate time needed wait/load cached image when first start dragging.

if happen add node or move node or anything, after cache image. manageable don't want cache image (drains performance). again cached image ready stage.drag event beforehand.

the goal have stage cached before mousedown touchstart , start dragging. helps.