Ist es möglich, nur das Canvas-Element zu drucken?

Question

Ich habe eine Webseite erstellt, die Sie eingeben, einige Informationen kann und ziehen dann ein Bild in einem Canvas-Elemente auf diesen Informationen basiert. Ich habe es so ziemlich die Art und Weise arbeitet ich mit Ausnahme des Druck will.

Gibt es eine Möglichkeit, das Canvas-Element zu drucken oder ein neues Fenster schafft in ziehen, der einzige Weg, es zu tun?

Update:

Die Antwort war so einfach. Ich dachte an eine viel kompliziertere Lösung.

Ich wünsche, ich könnte mehr als 1 Antwort auswählen. Ich war nicht in der Lage, die Leinwand zu bekommen zu drucken, wenn ich * verwendet Anzeige zu deaktivieren. Die einfachste Lösung war einfach das Formular deaktivieren, die ich für die Eingabe verwendet wird, unter Verwendung von Form {display: none;} in der CSS innerhalb eines @media print {}. Danke für die schnelle Antwort.

    @media print {
           form {
         display:none;
       }
    }

Answer 1

Sie könnte so etwas wie diese versuchen:

@media print {
  * {
    display:none;
  }

  #SOME-CANVAS-ID {
    display:block;
  }
}

Ich bin mir nicht sicher, ob eine Leinwand Block ist standardmäßig, aber man könnte etwas entlang der Linien davon versuchen und sehen, ob es funktioniert. Die Idee ist, dass es alles ausblendet (*) für Printmedien, mit Ausnahme von einem anderen beliebigen Elemente solange die Priorität der Regel höher ist (weshalb ich den ID-Selektor verwendet wird).

Edit: Wenn CSS3 (speziell die Negation Pseudoklasse ) hatte mehr Unterstützung, die Regel, da dies könnte so einfach sein:

*:not(canvas) {
  display:none;
}

Dies kann jedoch dazu führen, das und -Tags versteckt werden, effektiv Ihre Leinwand als auch versteckt ...

Answer 2

Ich bin nicht 100% der Unterstützung sicher, aber Sie können CSS verwenden und ein Attribut in dem <link> Tag für media="print" setzen. In dieser CSS-Datei verstecken nur die Elemente, die Sie nicht wollen, um zu zeigen, während des Druckvorgangs: display:none;

Answer 3

Sie können versuchen, eine Leinwand nur für den Druck zu erstellen:

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