Does HTML5 Canvas emit an event when it finishes rendering?

Question

I'm having a problem right now with mobile browsers, trying to use PDF.JS to render PDF files in the browser. It works fine, but I need to render a gradient over the PDF files to hide some of the content, and I don't know how to figure out when the canvas is done rendering the PDF, so I'm setting a 3 second time-out and then running my "callback". It's not pretty, and I think it might be the cause of the problem above, since:

• the issue doesn't happen on desktop browsers at all.
• the issue doesn't happen on mobile if I don't render the gradient.

So my conclusion is that for some weird reason, if the gradient gets rendered before the PDF is finished rendering, the canvas "freaks out".

So, I need to attach a callback to the viewer's rendering operation, really, but I seriously doubt that such a function exists within this poorly documented (but mostly great-working) library.

Does HTML5 Canvas emit an event when it finishes rendering? If not, is there any solution that might allow me to ensure that the canvas's rendering is complete?

Answer 1

Just for reference, it turns out that I was wrong, and (I think this was a recent change?) the PDF JS library is hosted by and integrated natively by Mozilla. So naturally, they are on top of that API with features for just about everything (albeit in a documentation "format" meant more for experienced software engineers, in code form) and the way to attach an event handler for the page's rendering operation completion is implimented here:

https://github.com/mozilla/pdf.js/blob/master/web/pdf_viewer.js#L225

and accessed here:

https://github.com/mozilla/pdf.js/blob/master/web/viewer.js#L1733

An event, pagerendered, is fired.

Answer 2

No, it does not.
The canvas or it context doesn't have a clue what's actually happening to (/being drawn on) them.

You're going to have to "attach a callback to the viewer's rendering operation."