Home/ Questions/Q 49893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T16:30:29+00:00

I’ve created a web page that lets you input some information and then draws

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    • 0