¿Es posible imprimir solo el elemento de lienzo?

Question

He creado una página web que le permite ingresar información y luego dibuja una imagen en un elemento de lienzo basado en esa información. Lo tengo funcionando de la manera que quiero, excepto por la impresión.

¿Hay alguna forma de imprimir el elemento del lienzo o creando una nueva ventana para dibujar, la única forma de hacerlo?

Actualización:

La respuesta fue muy simple. Estaba pensando en una solución mucho más complicada.

Desearía poder elegir más de 1 respuesta. No pude imprimir el lienzo cuando usé * para deshabilitar la visualización. La solución más simple era simplemente apagar el formulario que estaba usando para la entrada, usando el formulario {display: none;} en el CSS dentro de una impresión @media {}. Gracias por la rápida respuesta.

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

Answer 1

Podría intentar algo como esto:

@media print {
  * {
    display:none;
  }

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

No estoy seguro de si un lienzo está bloqueado de forma predeterminada, pero podría intentar algo similar y ver si funciona. La idea es que ocultará todo (*) para los medios impresos, a excepción de algún otro elemento arbitrario, siempre y cuando la precedencia de la regla sea mayor (por eso utilicé el selector de ID).

Editar: If CSS3 (específicamente la pseudo-clase de negación ) tuvo más apoyo, su regla podría ser tan simple como esta:

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

Sin embargo, esto puede causar < html > y < body > etiquetas para ocultar, ocultando efectivamente su lienzo también ...

Answer 2

No estoy 100% seguro del soporte, pero puede usar CSS y poner un atributo en la etiqueta <link> para media="print". En este archivo CSS, solo oculte los elementos que no desea mostrar mientras imprime: display:none;

Answer 3

Puede intentar crear un lienzo solo para imprimir:

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