4

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):

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.

Laust Deleuran
  • 492
  • 1
  • 5
  • 19
  • 2
    http://rectangleworld.com/blog/archives/214 describes why that might be the case in some browsers – K Scandrett Mar 24 '17 at 23:32
  • @KScandrett Sweet, this stands out: "_This effect is no doubt due to the way color component values are stored as integers ranging from 0 to 255, manipulated as floats, and then stored again as integers. Interestingly, Chrome seems to handle this arithmetic differently from the other browsers._" Although it seems also Chrome and FF are having this "issue" now. So it might be __by design__. Thanks! If you post an answer, I'll give the answer to ya :) – Laust Deleuran Mar 26 '17 at 01:09

1 Answers1

-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.

Noq
  • 1
  • Yeah, that's actually a good idea as long as the background is a solid color. However, that has two drawbacks: 1) It won't work for any other backgrounds than flat colors; 2) It requires me to track history of movement of every particle, which is expensive. And if you are tracking the history of the particle, you might as well draw the trails manually. – Laust Deleuran May 15 '18 at 23:58