仅清除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/