canvasの背景色をなくしたい

前提・実現したいこと

雨のcanvasの背景を透明にしたい。

codepenで見つけた雨のcanvasは背景が真っ黒です。雨の色を白くするのは叶ったのですが、背景を透明（transparent）にするやり方が分かりません。Canvasの読み方が分かる方、お助けください。お願いいたします。

該当のソースコード

HTML
1<canvas id="canvas"></canvas>

CSS
1#canvas {
2    position: absolute;
3    z-index: -500;
4    top: 0;
5    left: 0;
6    width: 100%;
7    height: 100vh;
8}

javasprict
1// rain
2requestAnimFrame = (function() {
3    return window.requestAnimationFrame ||
4        window.webkitRequestAnimationFrame ||
5        window.mozRequestAnimationFrame ||
6        window.oRequestAnimationFrame ||
7        window.msRequestAnimationFrame ||
8        function(callback) {
9        window.setTimeout(callback, 1000/60);
10    };
11})();
12
13var canvas = document.getElementById('canvas');
14var ctx = canvas.getContext('2d');
15
16var width = 0;
17var height = 0;
18
19window.onresize = function onresize() {
20    width = canvas.width = window.innerWidth;
21    height = canvas.height = window.innerHeight;
22}
23
24window.onresize();
25
26var mouse = {
27    X : 0,
28    Y : 0
29}
30
31window.onmousemove = function onmousemove(event) {
32    mouse.X = event.clientX;
33    mouse.Y = event.clientY;
34}
35
36var particules = [];
37var gouttes = [];
38var nombrebase = 5;
39var nombreb = 2;
40
41var controls = {
42    rain : 2,
43    Object : "Nothing",
44    alpha : 1,
45    color : 100,
46    auto : false,
47    opacity : 1,
48    saturation : 100,
49    lightness : 100,
50    back : 0,
51    red : 0,
52    green : 0,
53    blue : 0,
54    multi : false,
55    speed : 2
56};
57
58function Rain(X, Y, nombre) {
59    if (!nombre) {
60        nombre = nombreb;
61    }
62    while (nombre--) {
63        particules.push( 
64            {
65                vitesseX : (Math.random() * 0.25),
66                vitesseY : (Math.random() * 9) + 1,
67                X : X,
68                Y : Y,
69                alpha : 1,
70                couleur : "hsla(" + controls.color + "," + controls.saturation + "%, " + controls.lightness + "%," + controls.opacity + ")",
71            })
72    }
73}
74
75function explosion(X, Y, couleur, nombre) {
76    if (!nombre) {
77        nombre = nombrebase;
78    }
79    while (nombre--) {
80        gouttes.push( 
81            {
82                vitesseX : (Math.random() * 4-2	),
83                vitesseY : (Math.random() * -4 ),
84                X : X,
85                Y : Y,
86                radius : 0.65 + Math.floor(Math.random() *1.6),
87                alpha : 1,
88                couleur : couleur
89            })
90    }
91}
92
93function rendu(ctx) {
94
95    if (controls.multi == true) {
96        controls.color = Math.random()*360;
97    }
98
99    ctx.save();
100    ctx.fillStyle = 'rgba('+controls.red+','+controls.green+','+controls.blue+',' + controls.alpha + ')';
101    ctx.fillRect(0, 0, width, height);
102
103    var particuleslocales = particules;
104    var goutteslocales = gouttes;
105    var tau = Math.PI * 2;
106
107    for (var i = 0, particulesactives; particulesactives = particuleslocales[i]; i++) {
108
109        ctx.globalAlpha = particulesactives.alpha;
110        ctx.fillStyle = particulesactives.couleur;
111        ctx.fillRect(particulesactives.X, particulesactives.Y, particulesactives.vitesseY/4, particulesactives.vitesseY);
112    }
113
114    for (var i = 0, gouttesactives; gouttesactives = goutteslocales[i]; i++) {
115
116        ctx.globalAlpha = gouttesactives.alpha;
117        ctx.fillStyle = gouttesactives.couleur;
118
119        ctx.beginPath();
120        ctx.arc(gouttesactives.X, gouttesactives.Y, gouttesactives.radius, 0, tau);
121        ctx.fill();
122    }
123    ctx.strokeStyle = "white";
124    ctx.lineWidth   = 2;
125
126    if (controls.Object == "Umbrella") {
127        ctx.beginPath();
128        ctx.arc(mouse.X, mouse.Y+10, 138, 1 * Math.PI, 2 * Math.PI, false);
129        ctx.lineWidth = 3;
130        ctx.strokeStyle = "hsla(0,100%,100%,1)";
131        ctx.stroke();
132    }
133    if (controls.Object == "Cup") {
134        ctx.beginPath();
135        ctx.arc(mouse.X, mouse.Y+10, 143, 1 * Math.PI, 2 * Math.PI, true);
136        ctx.lineWidth = 3;
137        ctx.strokeStyle = "hsla(0,100%,100%,1)";
138        ctx.stroke();
139    }
140    if (controls.Object == "Circle") {
141        ctx.beginPath();
142        ctx.arc(mouse.X, mouse.Y+10, 138, 1 * Math.PI, 3 * Math.PI, false);
143        ctx.lineWidth = 3;
144        ctx.strokeStyle = "hsla(0,100%,100%,1)";
145        ctx.stroke();
146    }
147    ctx.restore();
148
149    if (controls.auto) {
150        controls.color += controls.speed;
151        if (controls.color >=360) {
152            controls.color = 0;
153        }
154    }
155}
156
157function update() {
158
159    var particuleslocales = particules;
160    var goutteslocales = gouttes;
161
162    for (var i = 0, particulesactives; particulesactives = particuleslocales[i]; i++) {
163        particulesactives.X += particulesactives.vitesseX;
164        particulesactives.Y += particulesactives.vitesseY+5;
165        if (particulesactives.Y > height-15) {
166            particuleslocales.splice(i--, 1);
167            explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
168        }
169        var umbrella = (particulesactives.X - mouse.X)*(particulesactives.X - mouse.X) + (particulesactives.Y - mouse.Y)*(particulesactives.Y - mouse.Y);
170        if (controls.Object == "Umbrella") {
171            if (umbrella < 20000 && umbrella > 10000 && particulesactives.Y < mouse.Y) {
172                explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
173                particuleslocales.splice(i--, 1);
174            }
175        }
176        if (controls.Object == "Cup") {
177            if (umbrella > 20000 && umbrella < 30000 && particulesactives.X+138 > mouse.X && particulesactives.X-138 < mouse.X && particulesactives.Y > mouse.Y) {
178                explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
179                particuleslocales.splice(i--, 1);
180            }
181        }
182        if (controls.Object == "Circle") {
183            if (umbrella < 20000) {
184                explosion(particulesactives.X, particulesactives.Y, particulesactives.couleur);
185                particuleslocales.splice(i--, 1);
186            }
187        }
188    }
189
190    for (var i = 0, gouttesactives; gouttesactives = goutteslocales[i]; i++) {
191        gouttesactives.X += gouttesactives.vitesseX;
192        gouttesactives.Y += gouttesactives.vitesseY;
193        gouttesactives.radius -= 0.075;
194        if (gouttesactives.alpha > 0) {
195            gouttesactives.alpha -= 0.005;
196        } else {
197            gouttesactives.alpha = 0;
198        }
199        if (gouttesactives.radius < 0) {
200            goutteslocales.splice(i--, 1);
201        }
202    }
203
204    var i = controls.rain;
205    while (i--) {
206        Rain(Math.floor((Math.random()*width)), -15);
207    }
208}
209
210function Screenshot() {
211    window.open(canvas.toDataURL());
212}
213
214window.onload = function() {
215    var gui = new dat.GUI();
216    gui.add(controls, 'rain', 1, 10).name("Rain intensity").step(1);
217    gui.add(controls, 'alpha', 0.1, 1).name("Alpha").step(0.1);
218    gui.add(controls, 'color', 0, 360).name("Color").step(1).listen();
219    gui.add(controls, 'auto').name("Automatic color");
220    gui.add(controls, 'speed', 1, 10).name("Speed color").step(1);
221    gui.add(controls, 'multi').name("Multicolor");
222    gui.add(controls, 'saturation', 0, 100).name("Saturation").step(1);
223    gui.add(controls, 'lightness', 0, 100).name("Lightness").step(1);
224    gui.add(controls, 'opacity', 0.0, 1).name("Opacity").step(0.1);
225    gui.add(controls, 'Object', ['Nothing','Circle','Umbrella', 'Cup']);
226    gui.add(window, 'Screenshot');
227    var Background = gui.addFolder('Background color');
228    Background.add(controls, 'red', 0, 0).step(1);
229    Background.add(controls, 'green', 0, 0).step(1);
230    Background.add(controls, 'blue', 0, 0).step(1);
231};
232
233(function boucle() {
234    requestAnimFrame(boucle);
235    update();
236    rendu(ctx);
237})();
238