Push object inside an array on mobile canvas

Here is the code about canvas animation on mobile device. The animation is simply render balls bouncing inside the mobile screen. I want to catch the acceleration numbers of device (var rot_x), and using this number to make a function called "createBalls" be triggered to create a new ball inside the "balls" array, and then render the balls inside the balls array on canvas.

But finally..... the rendering balls randomly pops up many in short time on the phone.And I can't successfully render new ball into canvas and let them bouncing on screen, but the new ball object is surely created inside the "balls" array....

//initialize the canvas
window.addEventListener('load', function(event) {       
  cvInit();                     
});


window.addEventListener('orientationchange', resizeCV, false);
window.addEventListener('resize', resizeCV, false);
function resizeCV() {
  ctx.canvas.width = window.innerWidth; 
  ctx.canvas.height = window.innerHeight;
  cx = ctx.canvas.width;
  cy = ctx.canvas.height;
  center_ball_r = Math.round(Math.min(cx/8, cy/8));
}


function cvInit() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");        
  ctx.canvas.width = window.innerWidth; 
  ctx.canvas.height = window.innerHeight;
  cx = ctx.canvas.width;
  cy = ctx.canvas.height;
  center_ball_r = Math.round(Math.min(cx/8, cy/8));
}

if (window.DeviceMotionEvent != undefined) {

  //catch the motion of device for createBalls that the new ball will be created when rota_x countering the threshold.
  window.ondevicemotion = function(e) {
    ax = event.accelerationIncludingGravity.x * (-9.8);
    ay = event.accelerationIncludingGravity.y * (-9.8); 
    rota_x = event.accelerationIncludingGravity.x;
  }


  function Ball (x, y, vx, vy, r, c, xx){
    this.x =  x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.r = r;
    this.color = c;
    this.xx = xx;

    this.update = function(){
      var landscapeOrientation = window.innerWidth/window.innerHeight > 1;

      if (landscapeOrientation) {
        //Counting the last vocelity
        this.vx = this.vx + ay + this.xx; 
        this.vy = this.vy + ax + this.xx;
      }                                         
      else {                    
        this.vx = this.vx + ax + this.xx; 
        this.vy = this.vy - ay + this.xx;
      }

      this.vx = this.vx * 0.99;
      this.vy = this.vy * 0.99;

      this.y = parseInt(this.y + this.vy / 50);
      this.x = parseInt(this.x + this.vx / 50);

    }

    this.collide = function(){
      if(this.x < 0) {
        this.x = this.x+10; this.vx = -this.vx;
      }
      if(this.x > cx) {
        this.x = this.x-10; this.vx = -this.vx;
      }
      if(this.y < 0) {
        this.y = this.y+10 ;this.vy = -this.vy;
      }
      if(this.y > cy) {
        this.y = this.y-10 ;this.vy = -this.vy;
      }                                                 
    }

    this.display = function(){
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
      ctx.fillStyle = this.color;
      ctx.fill();
    }                                   
  }


  function createBalls(){       
    ran_x = (Math.random() * cx/2).toFixed(1);
    ran_y = (Math.random() * cy/2).toFixed(1);
    ran_xx = 0;
    ran_vx = (Math.random() * 50).toFixed(1);
    ran_vy = (Math.random() * 20).toFixed(1);
    radius = (Math.random() *100).toFixed(0);
    ran_color = 'rgba('+(Math.random() * 255).toFixed(0) +','+ 
      (Math.random() * 255).toFixed(0) +','+
      (Math.random() * 255).toFixed(0) +','+
      0.3 + ')';                
    balls.push(new Ball(ran_x, ran_y, ran_vx, ran_vy, radius, ran_color, ran_xx));


  }

  //default render: a ball...                           
  createBalls();
  
  //drawing on canvas                                           
  function draw(){                                      
    ctx.clearRect(0, 0, cx, cy);

    balls.forEach (function(ball){
      ball.update();
      ball.collide();
      ball.display();
    });

    Here is the problem, the rendering randomly pops up many balls in short time on the phone.And I can't successfully render new bouncing ball into canvas...
    if (rota_x > 5) {
      createBalls();
    };                                                                                          


    requestAnimationFrame(draw);
  }
  requestAnimationFrame(draw);
}