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

Question

Here my jsfiddle code: https://jsfiddle.net/6u7bLkwc/2/

When i click on Clear IT button, i want to remove only the rectangles in the canvas, image must still there ... and my second problem is that when it clear everything, after that i can't make again a rectangles into the canvas.

And here the code that erase everything:

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

Note: Click and drag your mouse on the image in order to create rectangles.

Answer 1

Replace

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

with:

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

Answer 2

Just assign shapes to be an empty array after you press the button.

function clearIt() {
  shapes = []
}

Updated fiddle:

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