Slowly fade away image on canvas

Question

I used the Draw Worm and made some changes and the result was this , but I have a problem to solve. I want to make the lines that have been there a long time to slowly fade away into darkness. I made this code:

function fadeOut() {
    context.fillStyle = "rgba(0, 0, 0, 1)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    setTimeout(fadeOut,10000);
}
fadeOut();

The problem is that the lines are disappearing too quickly, instead I wanted to obtain a gradual fade out, or more slowly.

Answer 1

That should be easy. The problem is that rgba(0, 0, 0, 1) means fully opaque black. You will probably want to try some semitransparent color. For example:

function fadeOut() {
    context.fillStyle = "rgba(0, 0, 0, 0.05)";
    context.fillRect(0, 0, canvas.width, canvas.height);
    setTimeout(fadeOut,1000);
}
fadeOut();

I also recommend using requestAnimationFrame instead of setTimeout . I made a fiddle of your code, look how much nicer it is with fast animation: https://jsfiddle.net/Darker/mwj60hq4/