Clever Geek Handbook

Does HTML5 Canvas fire an event when rendering is complete?

I have a problem now with mobile browsers trying to use PDF.JS to render PDFs in the browser. It works great, but I need to display a gradient over the PDFs to hide some of the content, and I don't know how to detect when the canvas is done to render the PDF, so I set 3 seconds -out and then run my "callback". It's not pretty and I think it might be causing the problem above, since:

  • the problem does not occur at all in desktop browsers.
  • the problem does not occur on mobile devices if I do not issue a gradient.

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

So, I need to bind a callback to the viewer's render operation, but I seriously doubt that such a function exists in this poorly documented (but mostly perfectly working) library.

Does HTML5 Canvas provide an event when rendering is complete? If this is not the case, is there any solution that can allow me to guarantee that the canvas is rendered complete?

+3


source to share


2 answers


No, it is not. The context of the canvas or its context has no idea what is actually going on with them (/ drawn).



You will need to "attach a callback to the view render operation".

+1


source


Just for reference, it turns out I was wrong and (think this was the last change?) The PDF JS library is hosted and integrated by Mozilla. So naturally they sit on top of this API with functions for pretty much everything (although in "documentation" format more for experienced software engineers, in code form), and the way to attach an event handler to complete the page rendering operation is here:

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

and access to it:



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

Event started pagerendered

.

0


source






More articles:


All Articles