ansaurus

Question

Is it possible to print just the canvas element?

Answer 1

+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 2008-10-05 18:10:34

Answer 2

+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 2008-10-05 18:10:58

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 2008-10-06 04:22:15

http://www.css3.info/selectors-test/test.html claims that all 3 support not -- so if you're using canvas, :not() is fine.

olliej 2008-10-06 04:27:05

ansaurus

tags:

views:

answers:

Is it possible to print just the canvas element?

related questions