Using `html-to-image` was a mistake… I used it to generate the canvas objects so that the app could take a snapshot of the canvas, but the performance was horrible. After making a change in the canvas (e.g. moving an object), a denounce timer will run and afterwards, the canvas objects will be generated. Lastly, a snapshot will then be taken. This all happened using `html-to-image`. This caused a lag spike where the whole application froze for a few seconds.

Replies (1)

This was the flow: 1. Clone the entire React DOM tree. 2. Calculate all CSS rule for every node. 3. Embed all external fonts and images. 4. Serialize it all into a massive SVG. 5. Draw the SVG to an invisible canvas to extract a `.png`. This all ran synchronously on main thread which then caused the lag spike.