Bouncing ball animation: need to leave a trail - animation

Question

Here is a canvas animation of a bouncing ball. http://jsfiddle.net/eakA4/
My problem is that I would like the ball to leave a trail, ie a line that marks out where the ball has been in the past.
The code that determines the position of the ball is:
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
//theta = Math.atan2(mouse.y-ball.y,mouse.x-ball.x);
ball.x += vx;
ball.y += vy;
if (ball.x > canvas.width - ball.radius) {
ball.x = canvas.width - ball.radius;
vx *= -1;
} else if (ball.x < 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;
} else if (ball.y < 0 + ball.radius){
ball.y = 0 + ball.radius;
vy *= -1;
}
ball.draw(context);
}());
My problem is that because I'm using clearRect(), any path I try to draw is being wiped out. What I could do is keep adding ball.x and ball.y coords into an array then using the canvas lineTo() to link all these points each frame, but that would reach a large number of points very quickly.
Can anybody suggest a way of doing this?

Answer 1

Saw now that you want a line as trail not just trails as in motion-blur.
Updated fiddle for this:
http://jsfiddle.net/AbdiasSoftware/eakA4/3/
Add a new canvas on top where you can draw the lines to. This way you avoid clearing and keep rack of everything.
You can simply replace this line:
context.clearRect(0, 0, canvas.width, canvas.height);
with this:
var tmp = context.fillStyle; //backup fillstyle
context.fillStyle = 'rgba(255,255,255,0.2)';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = tmp;
The alpha channel value determines how much trails you'll get (less is more).
Updated example:
http://jsfiddle.net/AbdiasSoftware/eakA4/2/
(PS: I also fixed it so it works with Firefox - see requestAnimationFrame polyfill in code).