how can I make change the color of an object with a condition using rgba colors in canvas
<p>I'm trying to make a blackhole simulation, and although I'm almost done, I wish to make disappear the dots that are drawn on the blackhole progressively, here is my code:</p>

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
  &lt;head&gt;
       &lt;meta charset="utf-8" /&gt;
       &lt;title&gt;test trou noir&lt;/title&gt;
       &lt;script&gt;
var canvas, ctx;
var blackhole;
var circle;
var circles = new Array();
var G = 6.67e-11,//gravitational constant
pixel_G = G/1e-11,
c = 3e8, //speed of light (m/s)
M = 12e31,// masseof the blackhole in kg (60 solar masses)
pixel_M = M/1e32  
Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
pixel_Rs = Rs/1e3, // scaled radius 
ccolor=128;      

 function update() {
 var pos, i, distance, somethingMoved = false;
 for (i = 0; i &lt; circles.length; i++) {
    pos = circles[i].position;
    distance = Math.sqrt(((pos.x - 700) * (pos.x - 700)) + ((pos.y - 400) * (pos.y - 400)));
    if (distance &gt; pixel_Rs &amp;&amp; visible(circles[i])) {
        var delta = new Vector2D(0, 0);
        var forceDirection = Math.atan2(pos.y - 400, pos.x - 700);
      var evelocity = Math.sqrt( (2*pixel_G*pixel_M)/(distance*1e-2));
        delta.x += Math.cos(forceDirection) * evelocity;
        delta.y += Math.sin(forceDirection) * evelocity;
        pos.x += delta.x;
        pos.y += delta.y;
        somethingMoved = true;
    }
}
   if (somethingMoved) {
    drawEverything();
    requestAnimationFrame(update);
   } else {
    ccolor -=10;

    };
     }

function visible(ball) {
return ball.position.x &gt; ball.radius &amp;&amp; ball.position.x &lt; canvas.width - ball.radius &amp;&amp;
    ball.position.y &gt; ball.radius &amp;&amp; ball.position.y &lt; canvas.height - ball.radius;
}

function drawEverything() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
blackhole.draw(ctx);
for (var i = 0; i &lt; circles.length; i++) {
    if (visible(circles[i])) {
        circles[i].draw(ctx);
    }
   }
 }

function init() {
canvas = document.getElementById("space");
ctx = canvas.getContext('2d');
blackhole = new Ball(pixel_Rs, {
    x: 700,
    y: 400
}, "black");

for (var i = 0; i &lt; 200; i++) {
    var vec2D = new Vector2D(Math.floor(Math.random() * 1400), Math.floor(Math.random() * 800));
    circle = new Ball(5, vec2D, 'rgba('+ccolor+','+ccolor+','+ccolor+',1)');
    circles.push(circle);
}
drawEverything();
requestAnimationFrame(update);
 }


function Ball(radius, position, color) {
this.radius = radius;
this.position = position;
this.color = color;
 }
 Ball.prototype.draw = function(ctx) {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
};

function Vector2D(x, y) {
this.x = x;
this.y = y;
 }


 window.onload = init;

    &lt;/script&gt;
    &lt;style&gt;
        body {
            background-color: #021c36;
           margin: 0px; 
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="space" , width="1400" , height="800"&gt;
    &lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>now as you can see, I created a variable called ccolor which is integrated in the rgba code, but I don't know why the colors don't tend to zero, so the circles that are inside the blackhole gradually disappear, if someone could lend me a hand it'd be great</p>