É possível imprimir apenas o elemento de tela?

Question

Eu criei uma página web que permite a entrada de algumas informações e, em seguida, desenha uma imagem em um elemento de tela com base em que informações. Eu tê-lo praticamente trabalhando do jeito que eu quero, exceto para a impressão.

Existe uma maneira para imprimir o elemento de tela ou está a criar uma nova janela para atrair, a única maneira de fazê-lo?

Update:

A resposta foi tão simples. Eu estava pensando em uma solução muito mais complicado.

Eu gostaria de poder escolher mais de 1 resposta. Eu não era capaz de obter a tela para imprimir quando eu usei * para exibir os desativar. A solução mais simples era simplesmente desligar a forma que eu estava usando para a entrada, usando o formulário {display: none;} no CSS dentro de uma impressão @media {}. Obrigado pela resposta rápida.

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

Answer 1

Você poderia tentar algo como isto:

@media print {
  * {
    display:none;
  }

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

Eu não tenho certeza se uma tela é bloco por padrão, mas você pode tentar algo ao longo das linhas de que e ver se funciona. A idéia é que ele vai esconder tudo (*) para mídia impressa, exceto para algum outro elemento arbitrário enquanto prioridade da regra é maior (que é por isso que eu usei o seletor de ID).

Editar: Se CSS3 (especificamente o negação pseudo-classe ) teve mais apoio, sua regra poderá ser tão simples como isto:

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

No entanto, isso pode causar o e tags para ser escondido, escondendo-se de forma eficaz a sua tela bem ...

Answer 2

Eu não estou 100% certo do apoio, mas você pode usar CSS e colocar um atributo na tag <link> para media="print". Neste arquivo CSS, apenas ocultar os elementos que você não quer mostrar durante a impressão: display:none;

Answer 3

Você pode tentar criar uma tela apenas para impressão:

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