Skip to main content
Participating Frequently
May 4, 2021
Question

Printing a canvas as a PDF (or otherwise) from a web page

  • May 4, 2021
  • 1 reply
  • 1217 views

I have created some question generators for my Maths classes. Here is an example: https://mymathsroom.com/warmups/valueofdigit5qq/

These are done using Adobe Animate.

I would like to crreate an A4 size canvas with questions gneerated on it and be able to print it out for student to take away as a worksheet.

I was wondering if there is a way to print a canvas to a PDF or directly to a printer from a web page.

I was wondering if someone might be able to point me in the right direction to learn how to do this.

Thank you

This topic has been closed for replies.

1 reply

JoãoCésar17023019
Community Expert
Community Expert
May 4, 2021

Hi.

 

If you don't need a lot of customization, the easiest way is to invoke the print method to call the browser's print dialog.

 

Please let us know if this is what you want.

 

Regards,

JC

rodecssAuthor
Participating Frequently
May 4, 2021

Hi there JC,

I just tried that out and I am super happy! All I need to do now is to create my activity sheets in A4 size in animate and remove some of the buttons and it should look good. 

Just wondering, is there anyway you can remove the print button so that it does not actually appear on the printed copy?

 

Thanks heaps for your help - I am a very excited teacher.

 

Rod

JoãoCésar17023019
Community Expert
Community Expert
May 5, 2021

That's great, Rod!

 

You can make use of the afterprint event and possibly the beforeprint event as well. Here is a sample:

var root = this;

root.setupPrint = function(e)
{
	root.yourPrintButton.visible = false;
};

root.print = function(e)
{
	window.print();
};

root.afterPrint = function(e)
{
    root.yourPrintButton.visible = true;
};

/* I'm using both mousedown and pressup events because if I use the same event for both, the print method it's called before the stage update */
root.yourPrintButton.on("mousedown", root.setupPrint);
root.yourPrintButton.on("pressup", root.print);
window.addEventListener("afterprint", root.afterPrint);

 

I hope it helps.

 

Regards,

JC