how to implement print function in html5

Question

I am trying to implement print function based on the layout I created below.

<html>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

  <script>
    function draw_bordered_rect(context, x, y, w, h) {
var colors = ['grey','red','black','green','orange','purple','yellow'];      
context.rect(x, y, w, h);
      context.fillStyle = "green";
      context.fill();

      context.lineWidth = 3;
      context.strokeStyle = "lightblue";
      context.stroke();
canvasContext.font = '25pt Arial';
      canvasContext.textAlign = 'center';
canvasContext.fillStyle = colors[x];
  //canvasContext.fillStyle = "black";
    canvasContext.fillText('ACTIVITY 1',canvas.width/2-2, 56);
       
    }



    window.onload = function() {
      canvas = document.getElementById('gameCanvas');
      canvasContext = canvas.getContext('2d');
      canvasContext.fillStyle = 'white';
      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

   
base_image = new Image();
        base_image.src = 'http://jacobian.xyz/draw/pic1.png';
        base_image.onload = function(){
            canvasContext.drawImage(base_image, 250, 80);
        }

bases_image = new Image();
        bases_image.src = 'http://jacobian.xyz/draw/e.png';
        bases_image.onload = function(){
            canvasContext.drawImage(bases_image, 20, 400);
        }

bases1_image = new Image();
        bases1_image.src = 'http://jacobian.xyz/draw/f.png';
        bases1_image.onload = function(){
            canvasContext.drawImage(bases1_image, 250, 550);
        }

bases2_image = new Image();
        bases2_image.src = 'http://jacobian.xyz/draw/g.png';
        bases2_image.onload = function(){
            canvasContext.drawImage(bases2_image, 450, 545);
        }

bases3_image = new Image();
        bases3_image.src = 'http://jacobian.xyz/draw/h.png';
        bases3_image.onload = function(){
            canvasContext.drawImage(bases3_image, 350, 545);
        }


      draw_bordered_rect(canvasContext, 0, 0, 790, 70);
      draw_bordered_rect(canvasContext, 0, 540, 790, 70);
    
   

canvasContext.fillStyle = 'grey';
 canvasContext.fillRect(20, 150, 40, 40);
canvasContext.fillStyle = 'orange';
 canvasContext.fillRect(20, 200, 40, 40);
canvasContext.fillStyle = 'purple';
 canvasContext.fillRect(20, 250, 40, 40);
canvasContext.fillStyle = 'magenta';
 canvasContext.fillRect(20, 300, 40, 40);

     

canvasContext.fillStyle = 'red';
 canvasContext.fillRect(70, 150, 40, 40);
canvasContext.fillStyle = 'green';
 canvasContext.fillRect(70, 200, 40, 40);
canvasContext.fillStyle = 'blue';
 canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'yellow';
 canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'black';
 canvasContext.fillRect(70, 300, 40, 40);



    }

  </script>

</html>

so that when they click on the print button in the picture then the print dialog would come up.

I think the print function is like this.

function printPage()
{
 window.print();
}

any help would be appreciated though.

You have the correct JS to trigger the print dialog, the trick is attaching click event handlers, and collision detection between the click event and elements **IN** your canvas, have a look at this answer for click position detection http://stackoverflow.com/a/9880302/648350 — haxxxton, Jan 16 '17 at 08:12
I am having trouble of making the print image clickable in html5. because I want to trigger print function when they click the image. — , Jan 16 '17 at 08:53
Wrong title. Don't ask to implement print function. Search how to implement click on an area on canvas which is here: http://stackoverflow.com/questions/19133825/add-click-event-to-canvas-or-make-area-map — Arun Sharma, Jan 16 '17 at 09:12

score 0 · Accepted Answer · answered Jan 16 '17 at 08:33

Just make the buttons not part of the canvas. Have them part of normal html <a> or <button> tags that you styled.

Then add the the print function to an onclick event on those buttons/links.

That way you can also hide them in your CSS from printing. So they won't show up on the printed end result.

how to implement print function in html5

1 Answers1