How To Print Canvas Element By Using Javascript Print Method?

How can I print a created canvas element that has some content drawn on it using javascript? My print preview shows a blank box instead of the contents in the canvas element? First

Solution 1:

Here's what worked for me (no JS needed):

1. Include a print button in the HTML:

   <a id="btn-print" onclick="print()">Print</a>

2. Add this to your CSS:

   @media print {
     // Make all your non-canvas things (divs and stuff) disappear:
     .notCanvas, .alsoNotCanvas, ... {
       display: none;
     }
     // Center your canvas (optional):
     canvas {
       padding: 0;
       margin: auto;
       display: block;
       position: absolute;
       width: 800px;
       height: 800px;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
     }
   }

This lets you print just the canvas. I didn't cross-browser test this, but it definitely works in Chrome.