javascript - Conver konvajs canvas to image and load these image to another canvas -

i tried build many konvajs canvas , transform them konva images. , load these images canvas , show.

function main(){     var total_konva_stage= createstage();     var imageslayer= new konva.layer();     (var key in  array){          $(".tmpcontainer").remove();          containername = containernamebase + key;          $("#hidden_div").append("<div id='"+containername+"'  class='tmpcontainer'></div>");           var konva_stage =createcanvas(containername);  //create hidden dynamic div , bind stage          var img  = konva_stage .todataurl("image/png");          var imageobj = new image();          imageobj.src = img          imageobj.onload = function() {              callback_canvastoimg(imageslayer, imageobj);          };      }      total_konva_stage.add(imageslayer);      total_konva_stage.show();      total_konva_stage.draw(); } function callback_canvastoimg(imageslayer, imageobj){       var konva_image = new konva.image({imageobj});        imageslayer.add(konva_image ); } 

what think results "total_konva_stage" have every separate img konva_stage.

but found second img contain first img , third img contain first, second img

i have no idea now, please help. thanks

onload function callback asynchronous. means executed after whole array processed.

so in line: callback_canvastoimg(imageslayer, imageobj); variable imageobj refer last created image.

to avoid can:

1. use modern js syntax of declaring variables (in case should use babel)

   const imageobj = new image(); 

2. you can define closure function loop iteration. need use array.foreach instead of loop:

   array.foreach(function(item, key) {   $(".tmpcontainer").remove();   containername = containernamebase + key;   $("#hidden_div").append("<div id='"+containername+"'  class='tmpcontainer'></div>");    var konva_stage =createcanvas(containername);  //create hidden dynamic div , bind stage   var img  = konva_stage .todataurl("image/png");   var imageobj = new image();   imageobj.src = img   imageobj.onload = function() {      callback_canvastoimg(imageslayer, imageobj);   }; }