jquery - How to print canvas content using javascript -

i using canvas writing purpose using jsp page. able write message on canvas, (canvas message have created..) after when want print canvas message using javascript print code not able print canvas content. below can see print preview that..

i want print canvas message have created on canvas. please me out problem, appreciate..

it can happen canvas cleared when dialogs show - happens typically in chrome browser.

without having source code try didn't post i'll make theoretic answer can try out - suggest 2 possible solutions:

1. add event handler resize. when triggered redraw content (which means need store points etc. draw or make off-screen canvas store copy). have experienced event triggers (in chrome) when dialog has cleared canvas - if works print preview not sure - if not try next point:

2. when click print button, extract canvas image , replace (temporary) canvas element image element setting source data-uri canvas. on image's onload handler trigger print code:

example second point:

/// create reference canvas element var canvas = document.getelementbyid('mycanvas');  printbtn.addeventlistener('click' function() {      /// remove dom (use parent element if any, demo use body)     document.body.removechild(canvas);      var img = new image;      img.id = 'tempprintimage';    /// give id can remove in next step     img.onload = print;           /// onload handler triggers print method     img.src = canvas.todataurl(); /// set canvas image source      document.body.appendchild(img);  }, false);  function print() {      ...your print code here. on return reverse elements: ...      var img = document.getelementbyid('tempprintimage');     document.body.removechild(img);     document.body.appendchild(canvas); } 

the code may seem bit over-loaded key point here preserve content of canvas. can place image on top instead , forth.