Aspect ratio does not update when tsparticles' element changes size, but the window has not changed size

In Vanilla JS version 1.26.0 if tsparticles’ DOM element resizes, the canvas render becomes distorted. I’ve enabled resize: true, and upon manually resizing the window, tsparticles adjusts as expected. This however does not solve when a page reflows happens and all elements in a flexbox update with new widths and heights, one of which children is tsparticles.

QUESTION: Is there a way to have tsparticles auto-detect if its element (or parent) has changed size as a result of a reflow without a window resize occurring?

I’ve temporarily injected a resize event as a result of page changes which corrects the aspect ratio, but this doesn’t seem very elegant.

[n8sabes]

Hi @matteobit, Thank you for the response, and confirmation the workaround is currently best practice. It would be a nice if resize observed both the window and parent element to ensure aspect ratio is always correct in a responsive page.

tsparticles is amazing and I’m enjoying working with it!

[n8sabes]

Thanks for the snippet to access the canvas resize function. You have a good point about particle density. In my use case, a slider adjusts the size of sibling containers which causes rapid-fire updates, so I think:

1. Calling canvas.resizeWindow() will keep aspect ratios correct, and then
2. Defer a full load on debounce to fix density (ONLY IF density or other significant attribute has changed to prevent an unnecessary jolting replacement of particles).

This should make it nearly indiscernible to the eye.

Even the simplest things have edge cases to manage!!