Javascript 如何看穿p5.js中的矩形？

我正在尝试创建一个效果，你可以用鼠标悬停在网页上，它会有一个图形，当你到达一个区域时，你会展示一个图像。我想这样做：

• 在后面有一个图像
• 在上面有一个矩形（用来隐藏它）
• 让一个元素（你的鼠标）能够在矩形上移动并删除鼠标悬停的部分

如何使用p5.js实现这一点

我现在在屏幕上看到了：

    let img;

// function preload() {

// }

function setup() {
  var canvas = createCanvas(
    document.getElementById("myCanvas").offsetWidth,
    document.getElementById("myCanvas").offsetHeight
  );
  canvas.parent("myCanvas");
  // background(32);
  loadImage("../img/monalisa.png", img => {
    image(img, 0, 0);
  });
}

function draw() {
  //   monaLisa();
  rect(0, 0, 300, 300);
  circles();
}

// function monaLisa() {
//   image(img, 0, 0);
// }

function circles() {
  //   fill(255);
  ellipse(mouseX, mouseY, 25, 25);
}

---

只需将矩形向右按鼠标从左侧定位的像素数

let img;
let edgeX = 0;

function setup() {
  createCanvas(300,400)
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/300px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg")
}

function draw() {
  // variable updates
  if (mouseX > edgeX && 
      mouseX >= 0 && mouseX <= 300 && // mouse within limits of picture
      mouseY >= 0 && mouseY <= 400
     ) {
     edgeX = mouseX;
  }

  // actual  rawing
  image(img, 0, 0);
  fill('rgba(50,255,150, 0.5)');
  rect(edgeX, 0, 300, 400);
}

let-img；
设edgeX=0；
函数设置（）{
createCanvas（300400）
img=加载图像（“https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/300px-《蒙娜丽莎》%2C作者：莱昂纳多·达芬奇》%2C作者：C2RMF\u rettouched.jpg）
}
函数绘图（）{
//变量更新
如果（mouseX>edgeX&&
mouseX>=0&&mouseX=0&&mouseY=dx*x&&
mouseX=dy*y&&
老鼠
let canvW = 300
let canvH = 400
let img
let dx = 20
let dy = 40
let diff = 3
let blocks

function setup() {
  cursor(CROSS);
  mouseX = -10;
  mouseY = -10;
  createCanvas(canvW,canvH)
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/300px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg")
  blocks = new Array(canvH/dy);
  for (var i=0; i < blocks.length; i++) {
     blocks[i] = new Array(canvW/dx);
  }
}

function draw() {
  // variable updates
  for (var y=0; y < blocks.length; y++) {
    for (var x=0; x < blocks[y].length; x++) {
       if (mouseX >= dx*x && 
           mouseX <= dx*x+dx &&
           mouseY >= dy*y && 
           mouseY <= dy*y+dy
          ) {
         blocks[y][x] = false;
       }
    }
  }

  // actual drawing
  image(img, 0, 0)
  stroke(70,127,240, 100)
  strokeWeight(3)

  for (var y=0; y < blocks.length; y++) {
    for (var x=0; x < blocks[y].length; x++) {
       if (blocks[y][x] !== false) {
         // outer rectangle
         fill(`rgba(50,127,240, 0.5)`)
         rect(dx*x, dy*y, dx, dy)
         // inner rectangle
         fill(`rgba(70,127,240, 0.8)`)
         rect(dx*x+diff, dy*y+diff, dx-2*diff, dy-2*diff)
       }
    }
  }
}