I've created a web page that lets you input some information and then draws an image in a canvas element based on that info. I have it pretty much working the way I want except for the printing.
Is there a way to print out the canvas element or is creating a new window to draw in, the only way to do it?
Update:
The answer was so simple. I was thinking of a lot more complicated solution.
I wish I could pick more than 1 answer. I wasn't able to get the canvas to print when I used * to disable display. The simplest solution was to just turn off the form that I was using for input, using form {display:none;} in the CSS inside an @media print{}. Thanks for the quick response.
@media print {
form {
display:none;
}
}
-
I'm not 100% sure of the support, but you can use CSS and put an attribute in the
<link>tag formedia="print". In this CSS file, just hide the elements you don't want to show while printing:display:none;From Darryl Hein -
You could try something like this:
@media print { * { display:none; } #SOME-CANVAS-ID { display:block; } }I'm not sure if a canvas is block by default, but you could try something along the lines of that and see if it works. The idea is that it will hide everything (*) for print media, except for some other arbitrary element as long as the rule's precedence is higher (which is why I used the ID selector).
Edit: If CSS3 (specifically the negation pseudo-class) had more support, your rule could be as simple as this:
*:not(canvas) { display:none; }However, this may cause the <html> and <body> tags to be hidden, effectively hiding your canvas as well...
olliej : I know Safari supports :not(), I would be stunned if Opera doesn't, and i believe firefox trunk supports it (I don't know about Firefox 3.0) -- And given they are the browser that actually support the Canvas element that should be sufficient :Dolliej : http://www.css3.info/selectors-test/test.html claims that all 3 support not -- so if you're using canvas, :not() is fine.From Zack Mulgrew
0 comments:
Post a Comment