Insert Lottie Animation Into Another Canvas

Lottie in Web
1

I’d like to insert a Lottie animation into another HTML canvas running a video background. Is there a way to do this? Even when I set the player {renderer: “canvas”}, I can’t access the actual element that’s within .

Right now, I’ve cobbled something together by:

  • Calling snapshot(false) and putting the SVG content into a hidden div on the page
  • Using Canvg to convert the SVG into a canvas content
  • Using canvas.drawimage to draw the canvas content into the main canvas
  • Since the main canvas is a video, I’m doing this every 33ms to achieve 30fps

It’s working but not exactly very elegant or efficient. Is there another way to more efficiently overlay a lottie animation over video on canvas?

Thanks!

Charles Tang

1 Like
2

Did you ever find a solution Charles? Thanks