Why does document.getElementById(divName).innerHTML not get canvas element?

Question

so i am trying to print a div with canvas element using a basic JavaScript onClick function. This div has canvas and other HTML elements.

any idea how i can print this div without .

PS: inner.HTML completely strips off the canvas element and gets the others. The output is supposed to show a signed signature within the canvas tag but rather displays only sign here?

function printDiv(divName){
             var printContents = document.getElementById(divName).innerHTML;
             var originalContents = document.body.innerHTML;

             document.body.innerHTML = printContents;

             window.print();

             document.body.innerHTML = originalContents;
        }

HTML

<div id="divName">
<span>Sign below</span>

<canvas></canvas>

</div>

<button id="print" name="print" onclick="printDiv('divName')"> PRINT </button>

CSS Print Media, use it to hide the content you do not want to show up. — epascarello, Aug 02 '19 at 13:12
Possible duplicate of [Print
only?](https://stackoverflow.com/questions/468881/print-div-id-printarea-div-only) — qry, Aug 02 '19 at 13:14

score 0 · Accepted Answer · answered Aug 02 '19 at 13:21

While your question is most likely a duplicate of this following question, I will try to answer it anyway:

The div.innerHTML() Function just provides the raw inner HTML-Value - this doesn't work with the canvas element, because it is not storing its content in raw XML.

However, there are better solutions for printing than javascript: CSS contains a @media print selector, which allows you to hide all elements except the canvas, for example.

The code is made from the answer from the question i referenced:

CSS:

@media print {
  body * {
    visibility: hidden;
  }
  #divName, #divName * {
    visibility: visible;
  }
  #divName {
    position: absolute;
    left: 0;
    top: 0;
  }
}

A Basic introduction into CSS can be found here

Why does document.getElementById(divName).innerHTML not get canvas element?

1 Answers1