<!doctype html>
<html>
  <canvas id="rlottie" width="100" height="100"></canvas>
  <script>
    var Module = {
      onRuntimeInitialized: function() {

        class Animator {
          constructor(){
            this.instance = new Module.RlottieWasm();
            this.canvas = document.getElementById("rlottie");
            this.frames = this.instance.frames();
            this.curFrame = 0;
            this.tick_cb();
          }
          tick_cb() {
            var context = this.canvas.getContext('2d');
            var buffer = this.instance.render(this.curFrame, this.canvas.width, this.canvas.height);
            var clampedBuffer = Uint8ClampedArray.from(buffer);
            var imageData = new ImageData(clampedBuffer, this.canvas.width, this.canvas.height);
            context.putImageData(imageData, 0, 0);
            this.curFrame += 1;
            if (this.curFrame >= this.frames) this.curFrame = 0;
            window.requestAnimationFrame(()=>{ this.tick_cb();});
          }
        }
        var instance = new Animator();
      }
    };
  </script>
  <script src="rlottie-wasm.js"></script>
</html>