Lottie-web: Rendering multiple animations in one canvas context problems

[RenanSgorlom]

Hi, I am using the plugin version 5.5.3

I am trying to render multiple animations using one canvas context but I am having some problems:

1. The quality of the render is not as sharp as when you just change the renderer to canvas
2. How can you change the position of a certain element on the canvas if you render more than one using the context?
3. What are the options you can pass into the scaleMode key inside the redererSettings object? and is it even relevant for when you're rendering using canvas context?
4. When you render more than one element in the same canvas and they have different preserveAspectRatio values they start flickering
5. Does setSubframe have any impact on canvas render?

For context here's what I am trying to achieve:

I have a bunch of different characters, they're always facing right when I export them from AE, but using the canvas renderer and the context I want to be able to position them to the opposite sides of the screen, and also flip one of them similar to what you can achieve by using transform: scaleX(-1);

And also I want to be able to render an animated background on that same canvas, is that possible? would it have any performance benefits by doing all in one canvas as opposed to multiple canvas?

my reasoning is: since I want them all to be synced and the same frame rate then it makes more sense to have just one canvas for it and it also sounds like it would be more performant, but I am not 100% sure if this is true.

Here's a sample link of what I am trying to do... notice that I am changing the position of the elements inside the canvas using preserveAspectRatio which is not ideal... but it was the only way I found of changing the position of the elements

here's what's displayed:

love this plugin and any feedback is appreciated thanks!

[bodymovin]

1. Hi, regarding canvas quality, make sure you are not scaling the canvas in the DOM, if not, apart from some minor differences, it should look the same.
2. you can translate the canvas context between an animation and the following one to change the origin. In orderto do that you can listen to the enterFrame event of every animation and translate between one and the other.
3. scaleMode doesn't affect if you are providing your own canvas context
4. see 3.
5. yes, it affects the framerate of the rendering

[RenanSgorlom]

thanks for the support @bodymovin I will try your suggestions 🎉

[bodymovin]

Sure, let me know if you need anything else.