canvas-在图像上创建新图像时如何重设矩形区域？

Question

有人可以帮我吗？

主要要求：在图像上创建新矩形区域时如何清除以前的矩形区域？

如果上述要求得到解决，那将是很好的，除此之外，可以进行以下操作吗？

a）绘制矩形后是否可以调整其大小？

b）是否可以移动已创建的矩形位置

"use strict";
requestAnimationFrame(mainLoop);
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const storedRects = [];
const baseImage = loadImage("https://www.w3schools.com/css/img_fjords.jpg");
var refresh = true;
const rect = (() => {
    var x1, y1, x2, y2;
    var show = false;
    function fix() {
        rect.x = Math.min(x1, x2);
        rect.y = Math.min(y1, y2);
        rect.w = Math.max(x1, x2) - Math.min(x1, x2);
        rect.h = Math.max(y1, y2) - Math.min(y1, y2);
    }
	
    function draw(ctx) {
		 ctx.strokeRect(this.x, this.y, this.w, this.h) 
	}
    const rect = {x : 0, y : 0, w : 0, h : 0,  draw};
    const API = {
        restart(point) {
            x2 = x1 = point.x;
            y2 = y1 = point.y;
            fix();
            show = true;
        },
        update(point) {
            x2 = point.x;
            y2 = point.y;
            fix();
            show = true;
        },
        toRect() {
            show = false;
            return Object.assign({}, rect);
        },
        draw(ctx) {
            if (show) {rect.draw(ctx) }
        },
        show : false,
    }
    return API;
})();

function loadImage(url) {
    const image = new Image();
    image.src = url;
    image.onload = () => refresh = true;
    return image;
}

const mouse = {
    button : false,
    x : 0,
    y : 0,
    down : false,
    up : false,
    element : null,
    event(e) {
        const m = mouse;
        m.bounds = m.element.getBoundingClientRect();
        m.x = e.pageX - m.bounds.left - scrollX;
        m.y = e.pageY - m.bounds.top - scrollY;
        const prevButton = m.button;
        m.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button;
        if (!prevButton && m.button) { m.down = true }
        if (prevButton && !m.button) { m.up = true }
    },
    start(element) {
        mouse.element = element;
        "down,up,move".split(",").forEach(name => document.addEventListener("mouse" + name, mouse.event));
    }
}

mouse.start(canvas);
function draw() {
    ctx.drawImage(baseImage, 0, 0, ctx.canvas.width, ctx.canvas.width);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "yellow";
    storedRects.forEach(rect => rect.draw(ctx));
    ctx.strokeStyle = "red";
    rect.draw(ctx);
}
function mainLoop() {
    if (refresh || mouse.down || mouse.up || mouse.button) {
        refresh = false;
        if (mouse.down) {
            mouse.down = false;
            rect.restart(mouse);
        } else if (mouse.button) {
            rect.update(mouse);
        } else if (mouse.up) {
            mouse.up = false;
            rect.update(mouse);
            storedRects.push(rect.toRect());
        }
        draw();
    }
    requestAnimationFrame(mainLoop)
}

<canvas id="myCanvas" width="800" height="500" title = "click and drag to add rectangles" style="border:1px solid #000000;cursor:crosshair"></canvas>