javascript : Why, when printing, the canvas is cleared and nothing else appears on it?

Home>2021-02-23 07:13

javascript : Why, when printing, the canvas is cleared and nothing else appears on it?

When clicking on the "create rectangle" button, a square should appear, but why, after clicking on the "print" button, this does not happen?

var canvas= document.getElementById ("printable-area");
var ctx= canvas.getContext ('2d')
function createRectangle () {
    ctx.fillRect (200, 200, 100, 100);
}
ctx.fillRect (200, 200, 100, 100);
function printDiv (divName) {
     var printContents= document.getElementById (divName) .innerHTML;
     var originalContents= document.body.innerHTML;
     document.body.innerHTML= printContents;
     window.print ();
     document.body.innerHTML= originalContents;
}

# printable-area {
    border: 2px dotted #aaa
}

&lt;
! DOCTYPE html &gt;
&lt;
html &gt;
  &lt;
head &gt;
    &lt;
meta charset= "utf-8" &gt;
    &lt;
meta name= "viewport" content= "width= device-width" &gt;
    &lt;
title &gt;
repl.it &lt;
/title &gt;
    &lt;
link href= "style.css" rel= "stylesheet" type= "text /css" /&gt;
  &lt;
/head &gt;
  &lt;
body &gt;
      &lt;
canvas width= "500" height= "500" id= "printable-area" &gt;
&lt;
/canvas &gt;
      &lt;
input type= "button" onclick= "printDiv ('printable-area')" value= "print" /&gt;
      &lt;
input type= "button" onclick= "createRectangle ()" value= "create rectangle" /&gt;
    &lt;
script src= "script.js" &gt;
&lt;
/script &gt;
  &lt;
/body &gt;
&lt;
/html &gt;

Because by replacing innerHTML, you re-create absolutely all the elements of the page, and the canvas and ctx variables after that refer to the old canvas, which no longer exists on the page.

andreymal2021-02-23 23:13:09

Thanks, how can I get around this to make everything work?

Степан Пенёк2021-02-23 23:13:09

Answer # 1

"Dirty hack" -just hide the unnecessary:

var canvas= document.getElementById ("printable-area");
var ctx= canvas.getContext ('2d')
ctx.fillStyle= 'red'; ctx.fillRect (100, 100, 170, 170);
ctx.fillStyle= 'blue'; ctx.beginPath ();
ctx.ellipse (350, 180, 100, 100, Math.PI /2, 0, 2 * Math.PI);
ctx.fill ();
function createRectangle () {
  ctx.fillStyle= 'green'; ctx.fillRect (200, 200, 100, 100);
}
function printDiv () {
  document.body.className= 'print';
  window.print ();
  document.body.className= '';
}

# printable-area {border: 2px dotted #aaa; }
body.print # printable-area {border: 2px dotted # aaa0; }
body.print *: not (# printable-area) {display: none; }

&lt;
! DOCTYPE html &gt;
&lt;
html &gt;
&lt;
head &gt;
  &lt;
meta charset= "utf-8" &gt;
  &lt;
meta name= "viewport" content= "width= device-width" &gt;
  &lt;
title &gt;
repl.it &lt;
/title &gt;
  &lt;
link href= "style.css" rel= "stylesheet" type= "text /css" /&gt;
&lt;
/head &gt;
&lt;
body &gt;
  &lt;
input type= "button" onclick= "printDiv ()" value= "print" /&gt;
  &lt;
input type= "button" onclick= "createRectangle ()" value= "create rectangle" /&gt;
  &lt;
h1 &gt;
Printing &lt;
/h1 &gt;
  &lt;
canvas width= "500" height= "500" id= "printable-area" &gt;
&lt;
/canvas &gt;
  &lt;
script src= "script.js" &gt;
&lt;
/script &gt;
&lt;
/body &gt;
&lt;
/html &gt;

TutorialFor

javascript : Why, when printing, the canvas is cleared and nothing else appears on it?