javascript - Html canvas not rendered when attached then drawn then detached using jquery -

i using kendo-ui drawing api screenshot of section of webpage. api returns image data uri use generate image node.

data = "data:image/png;base64,ivborw0...." var imagenode = document.createelement("img"); imagenode.src = data; 

then create new canvas , append body element, draw image above on , in end detach body using jquery

var canvas = document.createelement("canvas"); canvas.id = "some_random_id"; canvas.width = 1650; canvas.height = 720;  $("body").append($(canvas));  var ctx = canvas.getcontext("2d"); ctx.drawimage(imagenode, 0, 0);  $(canvas).detach();  // in end return canvas in callback module requested can append wherever , use callback(canvas); 

the problem image rendered on canvas sometimes, not always. used work before couple of days got issue.

i tried in chrome debugger find when put break point on line detach image , pause in debugger

$(canvas).detach(); 

and resume debugger seems work without debugger works randomly.

i thought might timing issue tried timeout after detaching canvas , callback example

   $(canvas).detach();      settimeout(function () {         callback(canvas);      }, 200); 

but still renders randomly not everytime