HTML to Canvas conversion is not performing for dynamic nested DOM objects.

[Thirunavukarasu Saminathan]

HTML to canvas is not working as expected for the dynamic DOM objects without any issue.

Expected Behavior

When use toCanvas method from this library the dynamic dom objects not getting converted as we expected and also for the nested HTML elements are not getting rendered with proper css styles there was some sort issue of applying the styles into those converted HTML to Canvas objects.

When use toCanvas method from this library it has convert Canvas into deepest level of HTML along with respective css styes which is applied to those elments.

Current Behavior

Possible Solution

When we convert HTML to canvas it has to convert Nested DOM objects into deeper level along with defined css styles.

Steps To Reproduce

demo_clip.mp4

code example

const screenshot = await htmlToImage.toCanvas(pdftronUI, {
canvasWidth: this.canvas.height,
canvasHeight: this.canvas.height,
width: this.canvas.width,
height: this.canvas.height,
});

No Error

<!-- Provide a log message if relevant -->

Additional Context

Your Environment

Front-end: React JS
Backend: .Net

• html-to-image: 1.8.0
• OS: Mac and Windows
• Browser: Chrome Browser

[vivcat]

👋 @sthirunavukarasu

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.