What is the best way to get past the HTML5 canvas limitation of not being able to move previously drawn items?

Question

I am trying to create a streamline wind map using data from seven weather stations. I am trying to have the same type of map is this animation or this animation.

I have read articles online that say how it works. It is quoted below.

Typically, such a visualization in the browser relies on the Canvas 2D API and roughly works like this:

1. Generate an array of random particle positions on screen and draw the particles.
2. For each particle, query the wind data to get the particle speed in its current location, and move it accordingly.
3. Reset a small portion of particles to a random position. This makes sure that areas the wind blows away from never become fully empty.
4. Fade the current screen a bit and draw newly positioned particles on top.

Source

I am trying to achieve this, but I dont understand how the animations did the following...

1. Moved the points across the canvas (as you can't move previously drawn items.)
2. Adjusted the opacity of the previously drawn points to make them disappear.

So, how did they do that? Any advice is greatly appreciated for this novice programmer.

Thank you.

Answer 1

After significantly extensive research, I found a method to achieve what I was looking for.

1. Because I was creating a line that would have a tail that would disappear, I was able to use this code.

ctx.beginPath();
ctx.fillStyle = 'rgba(255, 255, 255, 0.25)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.closePath();

This draws an opaque layer over the canvas and allowed for the line to shorten.

2. Regarding the points, because i was making a line, I could replace the dot with the pixels from the image.