How to smoothly erase a line on canvas?

Question

JavaScript

Hello.
I have a script that draws lines on mouse movement.
It works like this:
On the mousemove event, the points through which the cursor has passed are fixed and they are entered into an array.
Next, in the animation loop, lines are drawn between these points.
The problem is that if you move the mouse quickly, few points will be fixed and some lines will be very long. And if you simply remove a point from the array via this.points.shift(), then there will be no smooth removal, this big line will simply disappear abruptly.
I decided to go this way:
Move the last point towards the next point. And when it reaches it, just remove it from the array and then no sharp deletions will be visible. It seems that I have implemented this idea, but for some reason, sometimes there are sharp glitches, flickering (screenshot below). How can this be fixed? Also I would like to implement a smooth transition effect with transparency so that it decreases in the tail, how can this be implemented?
Don't try to completely change my code. This is just a piece from my project, I specifically simplified it for you so that no one wasted time and could quickly understand the code. So I need it to be an array of dots, I need to use requestAnimationFrame etc.

Code: https://jsfiddle.net/0f62oegx

Answer 1

The shift () method removes the first element from an array and returns its value. This method changes the length of an array.

Also simplified a bit