Problem printing contents of Canvas tag (Chrome, Opera)

Question

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 combined 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 communicate with them?

---

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

Answer 1

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.

Answer 2

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..

Answer 3

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 complete reference, take a look at PHP's PDF manual.