P5.js рисунок на прозрачном фоне

Я пытаюсь рисовать несколько пузырей при каждом щелчке мыши, и я хочу, чтобы мой холст был прозрачным, чтобы на нем отображались только пузыри, не закрывая остальные элементы на сайте.

Проблема в том, что пузыри не двигаются, потому что каждый из них просто немного косит и рисует себя еще раз, не удаляя последний.

Как я могу заставить каждый пузырь исчезнуть (стать прозрачным) после перемещения и рисования в другом месте?

здесь вы можете увидеть проблему:

картина

о, а вот код:

var springs = [];

var Bubble = function(position) {

    this.position = position.copy();
    this.radius = random(10, 22);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.acceleration = random(1, 1.05);
    this.expire = random(30, 150);
};

Bubble.prototype.Move = function(){

    this.velocity = createVector(random(this.velocity.x-0.07,this.velocity.x+0.07), random(this.velocity.y-0.07,this.velocity.y+0.07));

    var wind;
    if (mouseX > windowWidth/2){
        wind = (windowWidth/2 + (mouseX - windowWidth/2))/10000.0 + 0.005;
    }else{
        wind = -1*((windowWidth/2 + (mouseX - windowWidth/2))/10000.0 + 0.005);
    }

    this.velocity.add(wind);

    this.position.add(this.velocity.mult(this.acceleration));

    this.expire -= 2;

    stroke(198, 151, 204, this.expire);
    strokeWeight(1);
    fill(255, 0);
    ellipse(this.position.x, this.position.y, this.radius, this.radius);

};

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {

    for(var i = 0; i < springs.length; ++i){
        var bubble = springs[i];
        if (bubble.expire > 0){
            bubble.Move();
        }else{
            springs.splice(i, 1);
        }
    }

    if (mouseIsPressed) {
        let bubble = new Bubble(createVector(mouseX, mouseY));
        springs.push(bubble);
    }
}