Is it possible to print just the canvas element?

StackOverflow https://stackoverflow.com/questions/172365

  •  05-07-2019
  •  | 
  •  

Question

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;
       }
    }
Was it helpful?

Solution

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

OTHER TIPS

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;

You can try to create a canvas just for printing:

this.Print = function () {
    var printCanvas = $('#printCanvas');
    printCanvas.attr("width", mainCanvas.width);
    printCanvas.attr("height", mainCanvas.height);
    var printCanvasContext = printCanvas.get(0).getContext('2d');
    window.print();
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top