Canvas renderer visual bug

[spmonahan]

Overview

The canvas renderer displays visual bugs. It looks like the background is not being cleared before a new frame is drawn.

I've created a repro for the issue:

• react-lottie-player

The issue is also present in lottie-player but is not present in lottie-web.

• lottie-player
• lottie-web

For the repro cases I've used an animation file from the Lottie site but I first noticed this with a different animation so it seems that it's not the animation file itself.

Consuming repo

react-lottie-player

...

Labels

• [ ] Add the Type: Bug label to this issue.

This is potentially the same issue as: https://github.com/LottieFiles/lottie-player/issues/211

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.

[Aystub]

If anyone else comes across this, there's a setting already in the library to handle clearing the canvas on re-draw. I didn't see it in the docs anywhere though. Can pass it as rendererSettings to the Player component. Properties you can pass are in this defaultOptions object: https://github.com/LottieFiles/lottie-react/blob/master/src/Player.tsx#L101-L106

<Player
  src={"./animation.json"}
  renderer={"canvas"}
  rendererSettings={{clearCanvas: true}} // Clears on re-draw
/>

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.