views:

561

answers:

2

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;
       }
    }

+1  A: 

I'm not 100% sure of the support, but you can use CSS and put an attribute in the <link> tag for media="print". In this CSS file, just hide the elements you don't want to show while printing: display:none;

Darryl Hein
+5  A: 

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

Zack Mulgrew
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 :D
olliej
http://www.css3.info/selectors-test/test.html claims that all 3 support not -- so if you're using canvas, :not() is fine.
olliej