Canvas trails leaves … trails

Question

A common way to do trails when animating in Canvas is to overlay your entire context with a semi-transparent color or gradient. Like this:

context.fillStyle = 'rgba(255, 255, 255, .05)';
context.fillRect(0, 0, canvas.width, canvas.height);

// ...draw your next frame

A lot of the examples available on how to create trails use this methodology (I didn't author any of these examples):

• http://codepen.io/gbnikolov/pen/VLLgRW
• http://www.html5gamedevs.com/topic/13621-best-way-to-create-fading-trails/
• http://www.growingwiththeweb.com/2012/10/creating-trail-effect-with-canvas.html

However, all of these seem to leave a slightly faded out trail of the "trail" , so that the trail never really goes away. I know there's alternative ways to create trails , but my main question is:

Why doesn't the trail fade completely? Why does adding additional multiple layers of a faded color constitute that color in full?

Thank you for helping out my confused brain.

Answer 1

You could try filling a rectangle a little while behind whatever is creating the trail every frame, just set the color to whatever the background color of your canvas is. This should cover up the trail after it's reached a certain length.