title: Making a print of a canvas img
body: <p>I am trying to create a button that when clicked:</p>
  <ol>
  <li>opens a canvas img in a new window;</li>
  <li>starts the print function;</li>
  <li>closes the new page after using JS.</li>
  </ol>
  <p>This is what I have so far:</p>
  <pre><code>    function printCanvas() {
          var canvas = document.getElementById(&quot;sidstemoned&quot;);
          var img = canvas.toDataURL(&quot;image/png&quot;);
          var newWin = window.open(&quot;&quot;);
          newWin.document.write('&lt;img src=&quot;' + img + '&quot; /&gt;');
          newWin.print();
          newWin.close();
      }
      $(document).ready(function () {
          $('#print_canvas').on('click', printCanvas);
      });
  </code></pre>
  <p>Canvas:</p>
  <pre><code>&lt;canvas
   class='costumor_statistic col-lg-12 col-md-12 col-sm-12'
   style='height:350px;'
   id='sidstemoned'&gt;&lt;/canvas&gt;
  </code></pre>
  <p>Button:</p>
  <pre><code>&lt;button
    class=&quot;btn btn-default hidden-print&quot;
    id=&quot;print_canvas&quot;&gt;Print &lt;span class=&quot;fa fa-print &quot;&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  <p>The console prints this when I press the button:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property <code>toDataURL</code> of <code>null</code></p>
  <p>at printCanvas</p>
  <p>at HTMLButtonElement.</p>
  <p>at HTMLButtonElement.dispatch (jquery.min.js:4)</p>
  <p>at HTMLButtonElement.r.handle (jquery.min.js:4)</p>
  </blockquote>