title: I want to make the balls redraw with new random speed, color and position when they dissapear at the bootom of the canvas
body: <p>I need help with my game. I want when the balls disappear at the bottom of the canvas to redraw on top with new position , speed and color not , but what i ended up with is just resetting its y coordinate to the default value and it just comes with the same color , size and speed.</p>
  
  <p>I tried resetting the value of y to default when it reaches the bottom, but that doesn't satisfy me.</p>
  
  <pre><code>var canvas = document.getElementById("canv");
  var ctx = canvas.getContext("2d");
  var ballsPerTick = 7;
  var balls = [];
  const viewLimit = canvas.height;
  
  function cball() {
      return {
          x: random(10, 800),
          y: 0,
          ballRadius: random(10,40),
          color:"#"+((1&lt;&lt;24)*Math.random()|0).toString(16),
          dy: random(1, 4)
      }
  }
  
  function drawBall(ball) {
      ctx.beginPath();
      ctx.arc(ball.x, ball.y, ball.ballRadius, 0, Math.PI*2);
      ctx.fillStyle = ball.color;
      ctx.fill();
      ctx.closePath();
  }
  
  function random(min, max) {
      return Math.random() * (max - min) + min;
   }
  
  function updateBall() {
      balls.forEach((ball) =&gt; {
      ball.y += ball.dy;
     });
  }
  
  function draw() {
  while (balls.length &lt; ballsPerTick) { 
      balls.push(cball());
      balls.filter(ball =&gt; ball.y &gt; viewLimit).forEach(ball =&gt; {ball.y = 10;});
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  updateBall();
  for(var i = 0; i &lt; balls.length; i++) {
      drawBall(balls[i]);
    }
  }
  
  setInterval(draw, 10);
  </code></pre>
  
  <p>I want the balls to redraw on top of the canvas with new position , speed and color.</p>