1

I have created a HTML based webpage consisting of a form, some texts and a canvas. I am trying to print this page that includes the canvas on a piece of paper. But the problem is - the canvas can't be printed. I also used toDataURL() method to convert the canvas to an image before printing, but it still didn't work. Could anyone give me some clues?

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(0, 0, 150, 100);
var img = c.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

function printData(){
 var divToPrint=document.getElementById("printTable");
 newWin= window.open("");
 newWin.document.write(divToPrint.outerHTML);
 newWin.print();
 newWin.close();
}

$('#printButton').on('click',function(){
printData();
});
<canvas id="myCanvas"></canvas>
<table id="printTable">
<button type="button" id="printButton" class="btn btn-info"> Print </i></button>
<tr><td>Data1 : </td><td >HTML</td></tr>
<tr><td>Data2 : </td><td >CSS</td></tr>
<tr><td>Image : </td><td >Wanna print the image here.</td></tr>
Dave Pateral
  • 1,415
  • 1
  • 14
  • 21
Devesh
  • 170
  • 11

1 Answers1

0

what you could do is try some of the other good answered solutions on other asked pages which is quite similar to what you are trying to archieve.

Try checking here: Capture HTML Canvas as gif/jpg/png/pdf?

Community
  • 1
  • 1
J.E Cruz
  • 17
  • 6
  • ... and the modern browsers (Chrome, FF & Edge) all allow you to right-click-save-as the canvas to a desktop image. Then the user can right-click-print that image. – markE Nov 15 '16 at 15:46