title: How to render a lottie animation to canvas object
body: <p>I am trying to use vue-lottie to take an after effects animation and render it to a canvas. The animation works fine but no matter what I do I cannot get it to render to canvas. It only seems to render an svg. I need a way to render animations to canvas I don't care how I do it. If I need to switch libraries thats fine I just need a way to get the animation on a canvas object. Any help here would be greatly appreciated. Heres the code </p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;lottie
        :options="defaultOptions"
        :heigh="1920"
        :width="1080"
        v-on:animCreated="handleAnimation"
      /&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import * as animationData from "../data.json";
  var text1 = "I hate sand";
  var text2 = "dope";
  var text3 = "nope";
  var text4 = "haha";
  var text5 = "n";
  animationData.layers[0].t.d.k[0].s.t = text1;
  animationData.layers[1].t.d.k[0].s.t = text2;
  animationData.layers[2].t.d.k[0].s.t = text3;
  animationData.layers[3].t.d.k[0].s.t = text4;
  animationData.layers[4].t.d.k[0].s.t = text5;
  console.log(animationData);
  export default {
    data() {
      return {
        defaultOptions: {
          animationData: animationData.default,
          container: "container",
          renderer: "canvas"
        },
        animationSpeed: 1
      };
    },
    methods: {
      handleAnimation: function(anim) {
        this.anim = anim;
      },
  
      stop: function() {
        this.anim.stop();
      },
  
      play: function() {
        this.anim.play();
      },
  
      pause: function() {
        this.anim.pause();
      },
  
      onSpeedChange: function() {
        this.anim.setSpeed(this.animationSpeed);
      }
    }
  };
  &lt;/script&gt;
  
  &lt;!-- Add "scoped" attribute to limit CSS to this component only --&gt;
  &lt;style scoped&gt;
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  .hello {
    background-color: black !important;
  }
  &lt;/style&gt;
  </code></pre>