Можно ли напечатать только элемент canvas?

Question

Я создал веб-страницу, которая позволяет вам вводить некоторую информацию, а затем на основе этой информации рисует изображение в элементе canvas. У меня все работает так, как я хочу, за исключением печати. ​​

Есть ли способ распечатать элемент canvas или создать новое окно для рисования, единственный способ сделать это?

Обновление:

Ответ был так прост. Я думал о гораздо более сложном решении.

Хотел бы я выбрать более 1 ответа. Я не смог заставить холст печатать, когда использовал *, чтобы отключить отображение. Простейшим решением было просто отключить форму, которую я использовал для ввода, используя форму {display: none;} в CSS внутри @media print {}. Спасибо за быстрый ответ.

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

Answer 1

Вы можете попробовать что-то вроде этого:

@media print {
  * {
    display:none;
  }

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

Я не уверен, является ли холст блоком по умолчанию, но вы можете попробовать что-то в этом роде и посмотреть, работает ли он. Идея состоит в том, что он будет скрывать все (*) для печатных СМИ, за исключением некоторых других произвольных элементов, если приоритет правила выше (именно поэтому я использовал селектор идентификатора).

Редактировать: Если CSS3 (в частности, псевдокласс ) имеет больше поддержки, ваше правило может быть таким простым:

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

Однако это может привести к тому, что теги и будут скрыты, что также эффективно скрывает ваш холст ...

Answer 2

Я не уверен на 100% в поддержке, но вы можете использовать CSS и поместить атрибут в тег <link> для media="print". В этом CSS-файле просто скройте элементы, которые вы не хотите показывать при печати: display:none;

Answer 3

Вы можете попробовать создать холст только для печати:

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