title: Printing images in Safari for windows in not as expected
body: <p>I am having some set of <code>canvas</code> drawn with some contents in my <code>webpages</code> and I need to <code>print</code> those <code>canvas</code>.
  I used the below code snippet to print with reference to this <a href="http://www.aspsnippets.com/Articles/Print-DIV-content-without-opening-new-popup-window-using-JavaScript.aspx" rel="nofollow">source</a></p>
  
  <pre><code>var frame1 = document.createElement('iframe');
  frame1.name = "frame1";
  frame1.style.position = "absolute";
  frame1.style.top = "-1000000px";
  document.body.appendChild(frame1);
  var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
  frameDoc.document.open();
  frameDoc.document.write('&lt;html&gt;&lt;head&gt;&lt;title&gt;DIV Contents&lt;/title&gt;');
  frameDoc.document.write('&lt;/head&gt;&lt;body&gt;&lt;center&gt;');
  for (var i = 1; i &lt;= 7; i++) {
      var canvas = document.getElementById('pagecanvas_' + i);
      frameDoc.document.write('&lt;img src="' + canvas.toDataURL() + '" style="border:1px solid;width:"'+ _pageWidth +'"px;height:"' + _pageHeight + '"px;margin:0px"&gt;&lt;br /&gt;');
  }
  
  frameDoc.document.write('&lt;/center&gt;&lt;/body&gt;&lt;/html&gt;');
  frameDoc.document.close();
  setTimeout(function () {
      window.frames["frame1"].focus();
      window.frames["frame1"].print();
      document.body.removeChild(frame1);
   }, 500);
  </code></pre>
  
  <p>I need each <code>canvas</code> to be printed in each paper, but the output is not as expected as the bottom part of the first page moves to the second and goes on and I got 8 pages of printed output when I have 7 canvas.</p>
  
  <p>The output is same when I tried to <code>print</code> by opening new <code>window</code> also. How can I print this as a canvas must be printed in single page itself</p>