These browsers (Windows versions) correctly print a web page which has a canvas overlay over an img tag image:

IE6, IE7, IE8, Firefox, Safari

But Chrome (up-to-date as I type this at version 3.0.195.27) and Opera (up-to-date as I type this version 10.0 build 1750) don't. Chrome ignores the canvas rendering entirely. Opera renders the entire canvas as a white rectangle, obscuring the image behind it.

I know the canvas tag is rather new, and that printing web pages is always dicey. How should I handle this? Are there any settings I'm missing to make this work? Is there an "about to print" event I can catch from JavaScript to at least warn the user?

---

Update: It's even weirder than it seems. The bined image (canvas overlaying an img) prints correctly on my Brother laserjet but not on my hp inkjet).

So the current situation is that most browsers print correctly to my inkjet, but Chrome does not. Opera screws up on both printers.

Is this all down to printer drivers and how various browsers municate with them?

---

Update: I notice that Google Docs builds a PDF for printing.

These browsers (Windows versions) correctly print a web page which has a canvas overlay over an img tag image:

IE6, IE7, IE8, Firefox, Safari

But Chrome (up-to-date as I type this at version 3.0.195.27) and Opera (up-to-date as I type this version 10.0 build 1750) don't. Chrome ignores the canvas rendering entirely. Opera renders the entire canvas as a white rectangle, obscuring the image behind it.

I know the canvas tag is rather new, and that printing web pages is always dicey. How should I handle this? Are there any settings I'm missing to make this work? Is there an "about to print" event I can catch from JavaScript to at least warn the user?

---

Update: It's even weirder than it seems. The bined image (canvas overlaying an img) prints correctly on my Brother laserjet but not on my hp inkjet).

So the current situation is that most browsers print correctly to my inkjet, but Chrome does not. Opera screws up on both printers.

Is this all down to printer drivers and how various browsers municate with them?

---

Update: I notice that Google Docs builds a PDF for printing.

• javascript
• printing
• google-chrome
• canvas
• opera

Share Improve this question Follow edited Nov 16, 2009 at 2:10 Nosredna asked Oct 19, 2009 at 16:49 NosrednaNosredna 86.5k1616 gold badges9898 silver badges124124 bronze badges 5

• 1 twiddla./test/ChromeCanvas.html test page, maybe helps to figure out the problem!? – powtac Commented Oct 19, 2009 at 16:59
• @powtac... You've made the problem more interesting. In Chrome, that page you linked to prints properly on my b&w laserjet, but the red box on the left does not print on my color inkject (but the two red figures on the right--which are bitmaps--do). – Nosredna Commented Oct 19, 2009 at 17:04
• The document is well printed if I use PDF Creator or XPS writer (didn't test it on a real printer) on Chrome 4.0.222 (Beta). This was maybe fixed in this version. – Fabien Ménager Commented Oct 19, 2009 at 17:18
• @Fabien Menager: I'm not sure that tells me anything since the problem depends on the printer I choose as output. – Nosredna Commented Oct 19, 2009 at 17:43
• I've no idea if this is related, but this blog post mentions problems when printing Canvas elements with Opera depending on the user settings: my.opera./OmegaJunior/blog/2009/08/13/… – John Smithers Commented Nov 16, 2009 at 12:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can use PHP's PDF functions to create PDF's programmatically. It's really easy!

To create a new PDF:

$pdf = pdf_new();

Open the file:

pdf_open_file($pdf, "pdfName.pdf");

You can set some variables such as the author:

pdf_set_info($pdf, "Title", "pdf Title here");

Now you'll need to use the pdf_begin_page() function:

pdf_begin_page($pdf, 595, 842);

these are the dimensions for A4.

content

And close the file with:

pdf_end_page($pdf);
pdf_close($pdf);

For a plete reference, take a look at PHP's PDF manual.

I wonder, if instead of rendering to a <canvas> element: it might print correctly if you were to render to an off-document canvas object and set a CSS style on a <div> to have a background-image set to "url("+myCanvasObject.toDataUrl()+")".

Also, you could just set the src attribute of a new <img /> element to that same myCanvasObject.toDataUrl(). This should be handled better than the method I mentioned above..

I would suggest to save the page as PDF and try printing. A PDF document to print should be WYSIWYG. If the PDF renders right, any printer should print it fine.