How to implement the effect (disappearing trace) like in the dark echo game?

Question

JavaScript

I want to make a visual sound effect that bounces off the walls and fades out (like in a dark echo game).
How can I do this by means of canvas?

The problem is this:
If I do this by creating translucent copies of the particle, then this will slow down the rendering too much (the trace is needed quite long) (see example below)

WASD or arrows - movement
Space - create sound


In the example above, I did not add the translucency of the particles, because. and so it is clear that such a number of particles loads the system
. However, if I do not completely erase canvas, then the lines will be distorted during the movement (I viewporttake away the conditional position of the camera to simulate (camera movement). This can be clearly seen if the arrows move back and forth (see example below)

WASD movement or
Space arrows - create sound


I definitely need to imitate viewport, tk. the whole map does not fit on the screen
Question: how to make such an effect so that it is not very heavy and does not slow down the browser, but at the same time looks decent (not like in the second example)?

Answer 1

Use a linear gradient like this: https://jsfiddle.net/RAX7/m2t98cjq/