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();
}

Anvi Jain

Published on 11-Apr-2018 13:57:06

• Related Questions & Answers
• Can the HTML5 Canvas element be created from the Canvas constructor?
• Measure text height on an HTML5 canvas element
• Translating HTML5 canvas
• HTML5 Canvas distorted
• HTML5 Canvas Transformation
• Create a pattern with HTML5 Canvas
• Draw a shadow with HTML5 Canvas
• HTML5 Canvas Transformation Matrix
• HTML5 Canvas Circle Text
• HTML5 Canvas Degree Symbol
• How can I use the HTML5 canvas element in IE?
• HTML5 Canvas Font Size Based on Canvas Size
• Change colour of an image drawn on an HTML5 canvas element.
• HTML5 Canvas to PNG File
• Display video inside HTML5 canvas