HTM5 Canvas, suggestions for changing animation effect
<p>So I'm new to canvas, and am still figuring out how things work. I am trying to make an animation of a volcano eruption. I separated the volcano and sky onto one layer, the eruption on the second layer, and the ash cloud on the third. I was referencing an example for the eruption animation, and in the way it is written, it blacks out the canvas. Is there a different way of achieving the same effect it already makes, but so that the opacity of the layer is all the way down so you can see the volcano and sky underneath the eruption? Here's my code:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang='en'&gt;
&lt;head&gt;
&lt;style&gt;
body {
 font-family: Verdana, Helvetica, sans-serif;
}
canvas {
 border: 1px solid black;;
}
&lt;/style&gt;
&lt;/head&gt;


&lt;body&gt;
&lt;div id="canvasesdiv" style="position:relative; width:400px; height:300px"&gt;
&lt;canvas id="layer1" style="z-index: 1; position:absolute; left:0px; top:0px;" width="800" height="500"&gt;&lt;/canvas&gt;
&lt;canvas id="layer2" style="z-index: 2; position:absolute; left:0px; top:0px;" width="800" height="500"&gt;&lt;/canvas&gt;
&lt;canvas id="layer3" style="z-index: 3; position:absolute; left:0px; top:0px;" width="800" height="500"&gt;&lt;/canvas&gt;
&lt;/div&gt;
&lt;script&gt;

//var canvas = document.getElementById("myCanvas");
//var context = canvas.getContext("2d");
var layer1;
var layer2;
var layer3;
var particles;
var eruption;
var timer;
var timerRestart;

function init(){
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");
canvas=layer3 = document.getElementById("layer3");
context=ctx3 = layer3.getContext("2d");

}

function animationHandler(){
fillBackgroundColor(canvas, context);
drawVolcano();
drawClouds();
eruption = setTimeout(makeParticles, 10);
}

function drawClouds(){

ctx3.beginPath();
ctx3.moveTo(0, 100);
ctx3.bezierCurveTo(0, 100, 75, 200, 150, 100);
ctx3.bezierCurveTo(150, 100, 225, 200, 300, 85);
ctx3.bezierCurveTo(300, 85, 375, 200, 450, 75);
ctx3.bezierCurveTo(450, 75, 525, 200, 600, 100);
ctx3.bezierCurveTo(600, 100, 700, 200, 800, 100);
ctx3.lineTo(800, 0);
ctx3.lineTo(0, 0);
ctx3.closePath();

ctx3.fillStyle = "#6f2a2a";
ctx3.fill();

ctx3.lineWidth = 5;
ctx3.strokeStyle = "#371515";
ctx3.stroke();

}

function drawVolcano(){

ctx1.beginPath();
ctx1.moveTo(0, 400);
ctx1.bezierCurveTo(0, 400, 250, 400, 325, 200);
ctx1.lineTo(425, 200);
ctx1.bezierCurveTo(425, 200, 450, 400, 800, 400);
ctx1.lineTo(800, 500);
ctx1.lineTo(0, 500);
ctx1.closePath();

ctx1.fillStyle = "#802b00";
ctx1.fill();

ctx1.lineWidth = 5;
ctx1.strokeStyle = "#b33c00";
ctx1.stroke();
}

function fillBackgroundColor(canvas, context){
ctx1.fillStyle = "#3399ff" ;
ctx1.fillRect(0, 0, canvas.width, canvas.height);
}

function makeParticles() {
//create an array of particles for our animation
particles = [];
for(var i = 0; i &lt; 100; i++)
{
    particles.push(new Particle());
}

}

function degreesToRadians(degrees) {
 //converts from degrees to radians and returns
return (degrees * Math.PI)/180;
}

function Particle(){
 //the constructor for a single particle, with random starting x+y, velocity, color, and radius
 //this.x = Math.random()*canvas.width;
 //this.y = Math.random()*canvas.height;
this.x = canvas.width/2;
this.y = (0,0);
this.vx = Math.random()*16-8;
this.vy = Math.random()*10;
var colors = ["red", "#ff6600", "yellow", "#262626"];
this.color = colors[Math.floor(Math.random()*colors.length)];
this.radius = 50;
}

function moveParticles() {
 //partially clear the screen to fade previous circles, and draw a new particle at each new coordinate
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = "rgba(0, 0, 0, 0.3)";
ctx2.fillRect(0, 0, canvas.width, canvas.height);
ctx2.globalCompositeOperation = "lighter";
for(var i = 0; i &lt; particles.length; i++)
{
    var p = particles[i];
    ctx2.beginPath();
    ctx2.arc(p.x, p.y, p.radius, 0, degreesToRadians(360), true);
    ctx2.fillStyle = p.color;
    ctx2.fill();
    p.x += p.vx;
    p.y += p.vy;
    if(p.x &lt; -50) p.x = canvas.width+50;
    if(p.y &lt; -50) p.y = canvas.height+50;
    if(p.x &gt; canvas.width+50) p.x = -50;
    if(p.y &gt; canvas.height+50) p.y = -50;
    p.radius -= 1;
}

}


function clearScreen(color) {
 //clears the screen and fills with the color of choice
ctx2.clearRect(0, 0, canvas.width, canvas.height);
ctx2.fillStyle = color;
ctx2.fillRect(0, 0, canvas.width, canvas.height);

}

window.onload = function() { 
init();
animationHandler();
timer = setInterval(moveParticles, 60);
//timerRestart = setInterval(makeParticles, 4000);
}

&lt;/script&gt;
&lt;/html&gt;
</code></pre>

<p>This is where the animation happens:</p>

<pre><code>function moveParticles() {
 //partially clear the screen to fade previous circles, and draw a new particle at each new coordinate
ctx2.globalCompositeOperation = "source-over";
ctx2.fillStyle = "rgba(0, 0, 0, 0.3)";
ctx2.fillRect(0, 0, canvas.width, canvas.height);
ctx2.globalCompositeOperation = "lighter";
</code></pre>