È possibile stampare solo l'elemento canvas?

Question

Ho creato una pagina Web che ti consente di inserire alcune informazioni e quindi disegna un'immagine in un elemento canvas in base a tali informazioni. Ho praticamente funzionato come voglio, tranne per la stampa.

C'è un modo per stampare l'elemento canvas o sta creando una nuova finestra per disegnare, l'unico modo per farlo?

Aggiornamento:

La risposta è stata così semplice. Stavo pensando a una soluzione molto più complicata.

Vorrei poter scegliere più di 1 risposta. Non sono riuscito a stampare la tela quando ho usato * per disabilitare la visualizzazione. La soluzione più semplice era quella di disattivare il modulo che stavo usando per l'input, usando il modulo {display: none;} nel CSS all'interno di una stampa @media {}. Grazie per la rapida risposta.

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

Answer 1

Potresti provare qualcosa del genere:

@media print {
  * {
    display:none;
  }

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

Non sono sicuro che una tela sia bloccata per impostazione predefinita, ma potresti provare qualcosa in questo senso e vedere se funziona. L'idea è che nasconderà tutto (*) per i supporti di stampa, ad eccezione di qualche altro elemento arbitrario a condizione che la precedenza della regola sia maggiore (motivo per cui ho usato il selettore ID).

Modifica: se CSS3 (in particolare la pseudo-classe di negazione ) con più supporto, la tua regola potrebbe essere semplice come questa:

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

Tuttavia, ciò può causare < html > e < body > tag da nascondere, nascondendo efficacemente anche la tua tela ...

Answer 2

Non sono sicuro al 100% del supporto, ma puoi usare CSS e inserire un attributo nel tag <link> per media="print". In questo file CSS, basta nascondere gli elementi che non si desidera mostrare durante la stampa: display:none;

Answer 3

Puoi provare a creare una tela solo per la stampa:

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