canvas - Bouncing ball animation: need to leave a trail -

Here is the canvas animation of a bouncing ball

My problem is that I want to leave the ball off I would like, that is, a line that says that the ball was in the first position.

The code that determines the condition is the ball:

  (function dropphrase) {window.request animationframe (dreframe, canvas); reference.clairreact (0, 0, canvas.Wide, canvas.height); // theta = Math.atan2 (mouse.a-ball.e., mouse.x-ball.x); ball.x + = vx; ball.y + = vy; If (ball.x> canvas.width - ball.rends) {Ball.x = canvas.width - ball.radius; vx * = -1;} and if (ball x. & Lt; 0 + ball.radius ) {Ball.x = 0 + ball.radius vx * = -1;} if (ball.y> canvas.height - ball.radius) {ball.y = canvas.height - ball.radius vy * = - 1;} and if (ball. Y & lt; 0 + ball.radius) {Ball.y = 0 + ball.radius; vy * = -1;} .draw (context);} ());   
 My problem is because I am using clear (), any way I try to attract, it is being destroyed. What can I do to add ball.x and ball.y codes to an array, then use the () from the canvas line to connect all these points to each frame, but this very large number of quick access  
 Can someone recommend a way to do this?   
 
 
 Now to see that you want a line in the form of a teal not only as a speed-haze Trails.  
 Upgrade to this Bela: 
  
 Add a new canvas to the top where you can draw lines so in this way, you avoid cleaning everything and keeping the rack Are there.  
  You can easily change this line:   
  context.clearRect (0, 0, canvas. Wide, canvas. ;   
 with this:  
  var tmp = context.fillStyle; // Backup FastType ReferenceFillStyle = 'RGBA (255255255.0.2)'; Context.fillRect (0, 0, canvas wide, canvas.height); Context.fillStyle = tmp;   
 The alpha channel value determines how many trails you will get (less is less).  
 Renewed example: 
  
 (PS: I have also decided to do this, so it works with Firefox - polyfill in the code  requestAnimationFrame  See).