Javascript HTML 5画布是否覆盖在网页顶部？

我们的目标是让焰火出现在现有网页的上方，这样您就可以同时看到现有网页和在其上方爆炸的焰火。我成功地将它们放在页面顶部，但是，现在它们不会消失。我在网页顶部留下了白色的堆积物

我有这个问题：

var SCREEN\u WIDTH=window.innerWidth，
屏幕高度=窗内高度，
鼠标座={
x:400，
y:300
},
//创建画布
canvas=document.createElement（'canvas'），
context=canvas.getContext（'2d'），
粒子=[]，
火箭队=[]，
最大粒子数=400，
色码=0；
//初始化
$（文档）.ready（函数（）{
document.body.insertBefore（canvas，document.body.firstChild）；
canvas.width=屏幕宽度；
canvas.height=屏幕高度；
设置间隔（启动，800）；
设置间隔（循环，1000/50）；
});
//更新鼠标位置
$（文档）.mousemove（函数（e）{
e、 预防默认值（）；
鼠标座={
x:e.clientX，
y:e.clientY
};
});
//发射更多火箭！！！
$（文档）.mousedown（函数（e）{
对于（变量i=0；i<5；i++）{
启动起点（Math.random（）*屏幕宽度*2/3+屏幕宽度/6）；
}
});
函数启动（）{
launchFrom（mousePos.x）；
}
函数启动自（x）{
如果（长度<10）{
var火箭=新火箭（x）；
rocket.explosionColor=Math.floor（Math.random（）*360/10）*10；
rocket.vel.y=Math.random（）*-3-4；
rocket.vel.x=Math.random（）*6-3；
火箭尺寸=8；
rocket.shrink=0.999；
火箭重力=0.01；
火箭。推（火箭）；
}
}
函数循环（）{
//更新屏幕大小
if（屏幕宽度！=窗口内部宽度）{
canvas.width=SCREEN\u width=window.innerWidth；
}
if（屏幕高度！=窗口内部高度）{
canvas.height=SCREEN\u height=window.innerHeight；
}
//透明帆布
context.fillStyle=“rgba（0,0,0,0.001）”；
fillRect（0，0，屏幕宽度，屏幕高度）；
var existingRockets=[]；
对于（变量i=0；i<0.length；i++）{
//更新和渲染
火箭[i].update（）；
火箭[i].渲染（上下文）；
//用毕达哥拉斯计算距离
var distance=Math.sqrt（Math.pow（mousePos.x-rockets[i].pos.x，2）+Math.pow（mousePos.y-rockets[i].pos.y，2））；
//如果火箭位于中部以上，随机概率为1%
var randomChance=rockets[i].位置y<（屏幕高度*2/3）？（数学.random（）*100=0 | |距离<50 | | randomChance）{
火箭[i]。爆炸（）；
}否则{
现有火箭。推（火箭[i]）；
}
}
火箭=现有火箭；
var existingParticles=[]；
对于（var i=0；iMAX_particles）{
粒子移位（）；
}
}
功能粒子（pos）{
this.pos={
x:pos？pos.x:0，
y:位置？位置y:0
};
this.vel={
x:0,，
y:0
};
这个.shrink=.97；
这个尺寸=2；
这个电阻=1；
这个重力=0；
this.flick=false；
这个α=1；
该值为0；
这个颜色=0；
}
Particle.prototype.update=函数（）{
//施加阻力
this.vel.x*=this.resistance；
this.vel.y*=this.resistance；
//重力下降
this.vel.y+=this.gravity；
//根据速度更新位置
this.pos.x+=this.vel.x；
this.pos.y+=this.vel.y；
//收缩
this.size*=this.shrink；
//淡出
this.alpha-=this.fade；
};
Particle.prototype.render=函数（c）{
如果（！this.exists（））{
返回；
}
c、 save（）；
c、 globalCompositeOperation='打火机'；
var x=这个位置x，
y=这个位置y，
r=该尺寸/2；
var gradient=c.createRadialGradient（x，y，0.1，x，y，r）；
gradient.addColorStop（0.1，“rgba（255255255，“+this.alpha+”））；
渐变。添加颜色停止（0.8，“hsla（+this.color+”，100%，50%，0）”）；
gradient.addColorStop（1，“hsla（“+this.color+”，100%，50%，0）”）；
c、 填充样式=渐变；
c、 beginPath（）；
c、 arc（this.pos.x，this.pos.y，this.flick？Math.random（）*this.size:this.size，0，Math.PI*2，true）；
c、 closePath（）；
c、 填充（）；
c、 恢复（）；
};
Particle.prototype.exists=函数（）{
返回this.alpha>=0.1&&this.size>=1；
};
功能火箭（x）{
粒子。应用（此[{
x:x，
y：屏幕高度}）；
这个.explosionColor=0；
}
Rocket.prototype=新粒子（）；
Rocket.prototype.constructor=火箭；
Rocket.prototype.explode=函数（）{
var count=Math.random（）*10+80；
对于（变量i=0；ivar SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    mousePos = {
        x: 400,
        y: 300
    },

    // create canvas
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d'),
    particles = [],
    rockets = [],
    MAX_PARTICLES = 400,
    colorCode = 0;

// init
$(document).ready(function() {
    document.body.insertBefore(canvas, document.body.firstChild);
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    setInterval(launch, 800);
    setInterval(loop, 1000 / 50);
});

// update mouse position
$(document).mousemove(function(e) {
    e.preventDefault();
    mousePos = {
        x: e.clientX,
        y: e.clientY
    };
});

// launch more rockets!!!
$(document).mousedown(function(e) {
    for (var i = 0; i < 5; i++) {
        launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
    }
});

function launch() {
    launchFrom(mousePos.x);
}

function launchFrom(x) {
    if (rockets.length < 10) {
        var rocket = new Rocket(x);
        rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
        rocket.vel.y = Math.random() * -3 - 4;
        rocket.vel.x = Math.random() * 6 - 3;
        rocket.size = 8;
        rocket.shrink = 0.999;
        rocket.gravity = 0.01;
        rockets.push(rocket);
    }
}

function loop() {
    // update screen size
    if (SCREEN_WIDTH != window.innerWidth) {
        canvas.width = SCREEN_WIDTH = window.innerWidth;
    }
    if (SCREEN_HEIGHT != window.innerHeight) {
        canvas.height = SCREEN_HEIGHT = window.innerHeight;
    }

    // clear canvas
    context.fillStyle = "rgba(0, 0, 0, 0.001)";
    context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

    var existingRockets = [];

    for (var i = 0; i < rockets.length; i++) {
        // update and render
        rockets[i].update();
        rockets[i].render(context);

        // calculate distance with Pythagoras
        var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));

        // random chance of 1% if rockets is above the middle
        var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;

/* Explosion rules
             - 80% of screen
            - going down
            - close to the mouse
            - 1% chance of random explosion
        */
        if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
            rockets[i].explode();
        } else {
            existingRockets.push(rockets[i]);
        }
    }

    rockets = existingRockets;

    var existingParticles = [];

    for (var i = 0; i < particles.length; i++) {
        particles[i].update();

        // render and save particles that can be rendered
        if (particles[i].exists()) {
            particles[i].render(context);
            existingParticles.push(particles[i]);
        }
    }

    // update array with existing particles - old particles should be garbage collected
    particles = existingParticles;

    while (particles.length > MAX_PARTICLES) {
        particles.shift();
    }
}

function Particle(pos) {
    this.pos = {
        x: pos ? pos.x : 0,
        y: pos ? pos.y : 0
    };
    this.vel = {
        x: 0,
        y: 0
    };
    this.shrink = .97;
    this.size = 2;

    this.resistance = 1;
    this.gravity = 0;

    this.flick = false;

    this.alpha = 1;
    this.fade = 0;
    this.color = 0;
}

Particle.prototype.update = function() {
    // apply resistance
    this.vel.x *= this.resistance;
    this.vel.y *= this.resistance;

    // gravity down
    this.vel.y += this.gravity;

    // update position based on speed
    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;

    // shrink
    this.size *= this.shrink;

    // fade out
    this.alpha -= this.fade;
};

Particle.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }

    c.save();

    c.globalCompositeOperation = 'lighter';

    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;

    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
    gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, 0)");
    gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0)");

    c.fillStyle = gradient;

    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();

    c.restore();
};

Particle.prototype.exists = function() {
    return this.alpha >= 0.1 && this.size >= 1;
};

function Rocket(x) {
    Particle.apply(this, [{
        x: x,
        y: SCREEN_HEIGHT}]);

    this.explosionColor = 0;
}

Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;

Rocket.prototype.explode = function() {
    var count = Math.random() * 10 + 80;

    for (var i = 0; i < count; i++) {
        var particle = new Particle(this.pos);
        var angle = Math.random() * Math.PI * 2;

        // emulate 3D effect by using cosine and put more particles in the middle
        var speed = Math.cos(Math.random() * Math.PI / 2) * 15;

        particle.vel.x = Math.cos(angle) * speed;
        particle.vel.y = Math.sin(angle) * speed;

        particle.size = 10;

        particle.gravity = 0.2;
        particle.resistance = 0.92;
        particle.shrink = Math.random() * 0.05 + 0.93;

        particle.flick = true;
        particle.color = this.explosionColor;

        particles.push(particle);
    }
};

Rocket.prototype.render = function(c) {
    if (!this.exists()) {
        return;
    }

    c.save();

    c.globalCompositeOperation = 'lighter';

    var x = this.pos.x,
        y = this.pos.y,
        r = this.size / 2;

    var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
    gradient.addColorStop(0.1, "rgba(255, 255, 255 ,255)");
    gradient.addColorStop(0.1, "rgba(0, 0, 0, 0)");

    c.fillStyle = gradient;

    c.beginPath();
    c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
    c.closePath();
    c.fill();

    c.restore();
};

//c.fill();

var particle = new Particle(this.pos);
particle.shrink = Math.random() * 0.05 + 0.93;
particle.size = 10;

particles.push(particle);

// create 2nd canvas
var canvas2 = document.createElement('canvas'),
    context2 = canvas2.getContext('2d');

canvas2.width = canvas.width;
canvas2.height = canvas.height;

// reduce alpha of second canvas
context2.globalAlpha = 0.8;

// produce faded copy of current canvas
context2.clearRect(0, 0, canvas2.width, canvas2.height);
context2.drawImage(canvas, 0, 0);

// redraw faded copy on original canvas
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(canvas2, 0, 0);