Canvas rendering is too slow on Firefox

[knokit]

Canvas renderer seems to take ages to render big images on Firefox (sometimes a couple of minutes), whereas Chrome renders the same image in a fraction of a second.

See below an example of the execution times, printed by the logger, for the same image generated in both browsers.

Chrome:

3931ms Starting renderer 3940ms Canvas renderer initialized (2305x8914 at 220,159) with scale 1 4675ms Finished rendering

Firefox:

2611ms Starting renderer 2638ms Canvas renderer initialized (2308x9069 at 220,159.6666717529297) with scale 1 122802ms Finished rendering

Specifications:

• html2canvas version tested with: 1.0.0-rc.5 (also reproducible with 1.0.0-alpha.12)
• Browser & version: Firefox 69.0.1 (64-bit)

[kpkalwa]

Even i am facing the same issue in firefox whereas chrome and Edge finishes the rendering in less than 5 seconds.

[kpkalwa]

Canvas renderer seems to take ages to render big images on Firefox (sometimes a couple of minutes), whereas Chrome renders the same image in a fraction of a second.

See below an example of the execution times, printed by the logger, for the same image generated in both browsers.

Chrome:

3931ms Starting renderer 3940ms Canvas renderer initialized (2305x8914 at 220,159) with scale 1 4675ms Finished rendering

Firefox:

2611ms Starting renderer 2638ms Canvas renderer initialized (2308x9069 at 220,159.6666717529297) with scale 1 122802ms Finished rendering

Specifications:

• html2canvas version tested with: 1.0.0-rc.5 (also reproducible with 1.0.0-alpha.12)
• Browser & version: Firefox 69.0.1 (64-bit)

Did you found any solution for this ?

[knokit]

@kpkalwa: Unfortunately, I haven't found any solution for this problem.

[RomanLut]

It is because rendering to canvas with clipping is very expensive on Firefox. html2canvas is using clipping regions to support !overflow.hidden styles.

Can be checked with dirty hack: CanvasRenderingContext2D.prototype.clip = function () { };

before calling html2canvas => works very fast, but with clipping artifacts.

[devravimori]

It is because rendering to canvas with clipping is very expensive on Firefox. html2canvas is using clipping regions to support !overflow.hidden styles.

Can be checked with dirty hack: CanvasRenderingContext2D.prototype.clip = function () { };

before calling html2canvas => works very fast, but with clipping artifacts.

You have done a miracle, it's just speed up the rendering from 1 minute to 1 second, I can't thank you enough bro.

[TannerS]

It is because rendering to canvas with clipping is very expensive on Firefox. html2canvas is using clipping regions to support !overflow.hidden styles.

Can be checked with dirty hack: CanvasRenderingContext2D.prototype.clip = function () { };

before calling html2canvas => works very fast, but with clipping artifacts.

Did not work for me :(