Javascript HTML5 canvas：选择矩形，想要绘制一个但绘制多个

Question

我正在为自己创建一个UI，在其中定义用于执行OCR的框。那不是重要的部分。我们正在考虑前端。对于UI，其想法是使用鼠标（mousedown，mousemove，mouseup）绘制一个矩形。但是我的脚本绘制了多个矩形而不是一个矩形。这是问题的图像。

我只想为每个选择矩形绘制一个矩形。我怎样才能做到这一点？这是我的选择代码。

        var ctx = Data.ctx_items[index];

        //get box
        Data.canvas_items[index].addEventListener('mousedown', function(e){
            Data.x1 = e.offsetX;
            Data.y1 = e.offsetY;
            Data.is_drawing = true;
        })

        Data.canvas_items[index].addEventListener('mousemove', function(e){

            if(Data.is_drawing){
                Data.x2 = e.offsetX - Data.x1;
                Data.y2 = e.offsetY - Data.y1;
                ctx.beginPath();
                ctx.rect(Data.x1, Data.y1, Data.x2, Data.y2);
                ctx.stroke();
            }
            
        })

        Data.canvas_items[index].addEventListener('mouseup', function(e){
            Data.is_drawing = false;
        })

感谢您的帮助。谢谢