javascript代码受html页面中文本位置的限制

我正在尝试使用这个javascript。但是当我在HTML页面中间写一些文本时，烟花就不会超过它，并且受到文本位置的限制……我怎么才能把它覆盖并保持烟花到页面的顶部？ 我试图固定屏幕宽度和屏幕高度位置，但不起作用

var SCREEN\u WIDTH=window.innerWidth，
屏幕高度=窗内高度，
鼠标座={
x:400，
y:300
},
//创建画布
canvas=document.createElement（'canvas'），
context=canvas.getContext（'2d'），
粒子=[]，
火箭队=[]，
最大粒子数=400，
色码=0；
//初始化
$（文档）.ready（函数（）{
document.body.appendChild（画布）；
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.05）”；
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+”））；
渐变.addColorStop（0.8，“hsla（“+this.color+”，100%，50%，“+this.alpha+”））；
渐变。添加颜色停止（1，“hsla（“+this.color+”，100%，50%，0.1）”）；
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；icanvas.style.position="fixed";
canvas.style.top="0";
canvas.style.left="0";
canvas.style.zIndex="-1";