How do I change opacity of individual object rendered on canvas?

Question

I have these particles that are objects in a list rendered on a canvas. Right now they populate the screen and if the list has more than a hundred entries then I delete the first two. My issue is I want to gradually increase the opacity on creation and gradually decrease it before the object is deleted. What would be the best way to go about this? Here is my js:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var dots = new Array();

function createDot(xStart, yStart, radius, movementX, movementY){
    this.xStart = (typeof xStart !== 'undefined') ? xStart : Math.floor(Math.random() * c.width);
    this.yStart = (typeof yStart !== 'undefined') ? yStart : Math.floor(Math.random() * c.height);
    this.movementX = (typeof movementX !== 'undefined') ? movementX : Math.floor(Math.random() * 50-25)/50;
    this.movementY = (typeof movementY !== 'undefined') ? movementY : Math.floor(Math.random() * 50-25)/50;
    this.radius = (typeof radius !== 'undefined') ? radius : Math.floor(Math.random() * 20);
    ctx.beginPath();
    ctx.arc(xStart,yStart,radius, 0,2*Math.PI, false);
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'white';
    ctx.fill();
    ctx.stroke();
}
function animate(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    dots.push(new createDot());
    for(i=0;i<dots.length;i++){
        let d = dots[i];
        
        ctx.beginPath();
        ctx.arc(d.xStart+=d.movementX, d.yStart+=d.movementY,d.radius, 0,2*Math.PI, false);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.strokeStyle = 'white';
        ctx.stroke();  
    }

    if(dots.length>100){
        dots.splice(0,2);
    }
    
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

canvas {
  background: black
}

<canvas id=canvas></canvas>

Answer 1

Something like this?

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var dots = new Array();

function createDot(xStart, yStart, radius, movementX, movementY){
    this.xStart = Math.floor(Math.random() * c.width);
    this.yStart = Math.floor(Math.random() * c.height);
    this.movementX = Math.floor(Math.random() * 50-25)/50;
    this.movementY = Math.floor(Math.random() * 50-25)/50;
    this.radius =  Math.floor(Math.random() * 20);
    this.opacity = 0
}

function animate(t){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    dots.push(new createDot());
    for(i=0;i<dots.length;i++){
        let d = dots[i];
        ctx.beginPath();
        ctx.arc(d.xStart+=d.movementX, d.yStart+=d.movementY,d.radius, 0,2*Math.PI,0);
        let a = dots.length>99 && i<20 ? 1-(20-i)*0.05 : Math.min(1, d.opacity+=0.05);
        ctx.fillStyle = `rgba(255,255,255,${a})`;
        ctx.fill();
    }
 
    if(dots.length>100){
        dots.splice(0,2);
    }
    
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

canvas {
  background:black
}

<canvas id=canvas ></canvas>