Javascript 使用p5画布作为固定背景

我需要一些帮助。我用p5制作了一个动画。我想用那个动画作为网页的背景。所以，除了一件事，一切都很好。当网页上有太多内容（文本、图像…）时，p5画布会滚动内容，因为它没有定位：固定。因此，我尝试在CSS文件中使用“position:fixed”，但没有任何帮助。有人能帮我吗

HTML:

模板

p5 Javascript：

var canvas;
var backgroundimage;

var type1_Rect = [];
var type1_Rect_amount = screen.width * 0.2;
var type1_Rect_speed = 1;
var type1_Rect_size = 1;


var type2_Rect = [];
var type2_Rect_amount = screen.width * 0.1;
var type2_Rect_speed = 0.7;
var type2_Rect_size = 2;
var j = 0;


var i = 0;
function windowResized(){
  resizeCanvas(window.innerWidth, window.innerHeight);
}
function setup() {
  backgroundimage = loadImage("wallpaper/galaxy.jpg");            //The Backgroundimage

  canvas = createCanvas(window.innerWidth, window.innerHeight);
  canvas.position(0, 0);
  canvas.style('z-index', '-10');  

  for(i = 0; i < type1_Rect_amount; i++){
    type1_Rect[i] = {
      x: random(0, screen.width),
      y: random(0, screen.height),

      display: function(){
        fill(255);
        noStroke();
        rect(this.x, this.y, type1_Rect_size, type1_Rect_size);
      },

      move: function(){
        this.y = this.y - type1_Rect_speed;

        if(type1_Rect[i].y <= 0){
        type1_Rect[i].y = window.innerHeight; 
        }
      }
    }
  }
  i = 0;


    for(j = 0; j < type2_Rect_amount; j++){
    type2_Rect[j] = {
      x: random(0, screen.width),
      y: random(0, screen.height),

      display: function(){
        fill(255);
        noStroke();
        rect(this.x, this.y, type2_Rect_size, type2_Rect_size);
      },

      move: function(){
        this.y = this.y - type2_Rect_speed;

        if(type2_Rect[j].y <= 0){
        type2_Rect[j].y = window.innerHeight; 
        }
      }
    }
  }
  j = 0;
  //---------------------------------------
}

function draw() {
  image(backgroundimage);      //Backgroundimage


  fill(255);
  //text(screen.width, 50, 50);
  //text(type1_Rect_amount, 50, 70);
  //text(type2_Rect_amount, 50, 90);


  while(i < type1_Rect_amount){
    type1_Rect[i].display();
    type1_Rect[i].move();

    i++;
  }
  i = 0;





    while(j < type2_Rect_amount){
    type2_Rect[j].display();
    type2_Rect[j].move();

    j++;
  }
  j = 0;

}

var画布；
var背景图像；
变量类型1_Rect=[]；
变量类型1\u Rect\u amount=screen.width*0.2；
变量类型1直接速度=1；
变量type1\u Rect\u size=1；
变量类型2_Rect=[]；
变量类型2\u Rect\u amount=screen.width*0.1；
变量类型2直接速度=0.7；
变量type2\u Rect\u size=2；
var j=0；
var i=0；
函数windowResized（）{
调整画布大小（window.innerWidth、window.innerHeight）；
}
函数设置（）{
backgroundimage=loadImage（“wallpaper/galaxy.jpg”）；//背景图像
canvas=createCanvas（window.innerWidth，window.innerHeight）；
画布位置（0,0）；
样式（'z-index'，'-10'）；
对于（i=0；i如果（type1_Rect[i].y尝试使用以下命令

canvas {
   position: fixed !important;
}

了解有关
！重要的
异常的详细信息。
我单击了按钮。我非常感谢：D
canvas {
   position: fixed !important;
}