仅清除html5画布中的矩形（我的代码清除所有内容）

Question

这是我的jsfiddle代码： https ://jsfiddle.net/6u7bLkwc/2/

当我单击“清除IT”按钮时，我只想删除画布中的矩形，图像必须仍然存在...而我的第二个问题是，当它清除所有内容时，此后我无法再次在画布中制作一个矩形。

这是擦除所有内容的代码：

function clearIt() {
ctx.globalCompositeOperation = "destination-out";
}

注意：在图像上单击并拖动鼠标以创建矩形。

Answer 1

更换

function clearIt() {
    ctx.globalCompositeOperation = "destination-out";
}

有：

function clearIt() {
    shapes = [];
    draw();
}

Answer 2

按下按钮后，只需将shapes分配为空数组即可。

function clearIt() {
  shapes = []
}

更新的小提琴：

https://jsfiddle.net/6u7bLkwc/3/