Print a HTML5 canvas element



The following is the code snippet to display an HTML5 canvas element.

<a href = "javascript:print_voucher()">PRINT CANVAS</a>
function print_canvas()
{
   $("#canvas_voucher").printElement();
}

Here canvas_voucher is ID of canvas element.To make this start functioning we need to convert the canvas into .png image URL and open it in a new browser window. Print dialog is triggered to let user print the page.

function print_canvasr(){
   var win1 = window.open();
   win1.document.write("<br><img src = '"+canvas.toDataURL()+"'/>");
   win1.print();
   win1.location.reload();
}

Advertisements