nothing draw on bitmapData Context when draw using setInterval function

[Gabbar Sisodiya]

     Hello everyone,
     I am new tophaser. I am trying to draw small circle using bitmapData. when the function lunchFrom and loop calling 
    without time event function it's fine working but when I am tryting call the function using  this.game.time.event  then 
    nothing to draw on canvas. please help me. Thanks is advance .

    Please find below the code which I am using.

 

 

    this.game = new Phaser.Game(1152, 648, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

     let particles = [];

      let mousePos = {

      x: 200,

       y: 200

      }

 

      function preload() {  }

      function create() {

      this.bmdAnimation = this.game.add.bitmapData(1152, 648);

      this.animationSprite = this.game.add.sprite(0, 0, this.bmdAnimation); 

       this.context = this.bmdAnimation.ctx;

       // launchFrom.apply(this);

       // loop.apply(this);

       this.game.time.events.add(800, launchFrom, this);

       this.game.time.events.add(20, loop, this);

     } 

     function update() {  }

     function launchFrom() {

        mousePos.y-=5; 

      let particle = new Particle(mousePos);

      particles.push(particle);

     }

     function loop() { 

           for (let i = 0; i < particles.length; i++) {

                  particles[i].update();

                  particles[i].render(this.context);

            }

      }

      export class Particle { 

       position: any;

       color: number;

       alpha: number;

       size: number;

      flick: boolean;

       constructor(position) {

              this.position = {

                     x: position ? position.x : 0,

                     y: position ? position.y : 0

             }     

        this.color = Math.random() * 100 - 30;

        this.alpha = 1;

        this.size = 30; 

        this.flick = false;

       }

     update() {

          this.position.y -= 0.1;

       }

       render(ctx) {

          ctx.save();

          ctx.globalCompositeOperation = 'lighter';

          var x = this.position.x;

           var  y = this.position.y;

            var r = this.size / 2;

         var gradient = ctx.createRadialGradient(x, y, 0.1, x, y, r);

         gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");

         gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");

         gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");

         ctx.fillStyle = gradient;

         ctx.beginPath();

         ctx.arc(this.position.x, this.position.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);

         ctx.closePath();

         ctx.fill();

         ctx.restore();

      };

 

    }