Canvas resize() breaks shape layers

[Joolyan]

Calling resize() with the canvas renderer, correctly resizes the canvas element but breaks shape layer rendering.

Tell us about your environment
Reproduced on macOS 13.6.9 and Windows 10
Browser: Firefox, Chrome, Edge, Safari
After Effects 24.5
Bodymovin 5.12.1

What did you do? Please explain the steps you took before you encountered the problem.
Called resize() with the canvas renderer.

What did you expect to happen?
Resize the canvas element after changes to viewport window - without breaking shape layer formatting.

What actually happened? Please include as much relevant detail as possible.
Canvas element correctly resized, but with some shape layers reverting to default settings.

• Shape layer paths change from round cap to butt cap
• Shape layer stroke widths change to 2
• Shape layer colours change to black

Please provide a download link to the After Effects file that demonstrates the problem.
https://codepen.io/e-media/pen/BagwWOr?editors=1111

The CodePen should open with the correctly formatted Lottie animation (Red dots with white trails) but when you resize the window, some of the formatting reverts to defaults.

Lottie hasn't been updated for over a year, but hopefully someone will have a possible solution. My temporary solution when the canvas renderer is requested, is to destroy the animation instance and reload, which is not ideal.

[Joolyan]

Just realised that the issue was introduced in v5.12.1 of the renderer, so downgrading to v5.12.0 is another temporary solution. This can be tested in the above CodePen example by changing the JS settings to https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js
Unfortunately v5.12.0 doesn't include some important new features and fixes. So hopefully this will be helpful to someone.

[Joolyan]

Found the issue which will require an update to the canvas renderer, however it appears that this is unlikely to happen anytime soon. v5.12.0 seems to be the best option.