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