Fix not rendering multiple calls to html()

[KurtGokhan]

Fixes #2899

[KurtGokhan]

Hmm, this change generates a byte-wise different but visually same PDF for some tests.

I don't understand exactly why. But I guess we were previously keeping all the state changes html2canvas does and now that they are reverted, it is a completely different file byte-wise.

Should I regenerate reference files?

[Uzlopak]

Yes, you would need to regenerate the reference PDFs.

[KurtGokhan]

Updated reference files. As I said, there are no visual changes.

[HackbrettXXX]

Thanks for the PR. There seems to be differences in the html-margin-page-break-image file: on the first page the black outline is thinner than before. Same thing for some of the other files. Could you investigate why? Maybe that's actually the correct behavior. But then the lines should also be thin on the other pages.

[KurtGokhan]

I hadn't noticed that.

At first glance, it looks like when a new page is created inside html, it is created with the state of that moment. So even after the state of first page is restored, the state of other pages remain the same. As you said the thin line is probably correct, but it should also be thin on other pages.

I don't know how to solve this yet but I will check when I find a chance.

Or I can just workaround the test by adding 3 pages before calling html so no new pages are added in html

[HackbrettXXX]

IMO, the pages that get created by context2d/html should have the regular initial state afterwards. If you find a quick solution we can fix it in this PR, but I'm also OK with fixing it in a separate PR. Then I think we should add the workaround to the tests, as you suggested.

[KurtGokhan]

I somehow fixed the issue with graphical stack. But there was another bug closely related to it so my fix was in vain. The bug is that when every state is restored from the stack, the graphical state is loaded from Context2D's default values. But those defaults are not the same as document's defaults. So the current page gets overwritten with Context2D's default graphical state, while other pages retain the document's default state.

For example, you can see the default line width for document and Context2D

This needs a more comprehensive fix so for now I just did the test workaround.

There is also another issue. It is not exactly a bug but it is something counter-intuitive, and I believe it is the source of all the confusion. When you change the graphical state (for example by doing context2d.lineWidth = 2), it only writes that to the current page. If you change to another page, you will have a different lineWidth, even though the context2d.lineWidth is still 2. This is my opinion but I think every page should share the graphical state and that will make a lot of logic easier. This is quite a breaking change so also not included here.

[HackbrettXXX]

Ah, that sounds indeed like something that should be improved at the root of the problem. But not in this PR, of course ;)

To solve the issue, IMO, we should keep track of the current jsPDF state and compare it with the current context2d state each time we switch to another page. We should then apply only the difference to the current page. Otherwise we would serialize the whole context2d state each time we switch pages.