Est-il possible d'imprimer uniquement l'élément canvas?

Question

J'ai créé une page Web qui vous permet de saisir des informations, puis de dessiner une image dans un élément de la toile en fonction de ces informations. Je le fais à peu près comme je veux, sauf pour l'impression.

Existe-t-il un moyen d’imprimer l’élément de travail ou crée-t-il une nouvelle fenêtre dans laquelle dessiner, le seul moyen de le faire?

Mise à jour:

La réponse était si simple. Je pensais à une solution beaucoup plus compliquée.

J'aimerais pouvoir choisir plus d'une réponse. Je n'ai pas réussi à imprimer la toile lorsque j'ai utilisé * pour désactiver l'affichage. La solution la plus simple consistait simplement à désactiver le formulaire que j'utilisais pour la saisie, en utilisant le formulaire {display: none;} dans le CSS à l'intérieur d'un @media print {}. Merci pour la réponse rapide.

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

Answer 1

Vous pouvez essayer quelque chose comme ceci:

@media print {
  * {
    display:none;
  }

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

Je ne suis pas sûr si un canevas est bloqué par défaut, mais vous pouvez essayer quelque chose dans le même sens et voir si cela fonctionne. L’idée est qu’elle masque tout (*) pour le support imprimé, à l’exception de tout autre élément arbitraire, à condition que la priorité de la règle soit supérieure (c’est pourquoi j’ai utilisé le sélecteur d’identité).

Modifier: Si CSS3 (en particulier la pseudo-classe de négation ) avait plus de soutien, votre règle pourrait être aussi simple que ceci:

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

Cependant, cela peut causer le < html > et < body > balises à masquer, masquant efficacement votre toile aussi ...

Answer 2

Je ne suis pas sûr à 100% du support, mais vous pouvez utiliser CSS et placer un attribut dans la balise <link> pour media="print". Dans ce fichier CSS, masquez simplement les éléments que vous ne souhaitez pas afficher lors de l'impression: display:none;

Answer 3

Vous pouvez essayer de créer une toile uniquement pour l'impression:

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