如何在HTML的视频画布上绘制可调整大小和可编辑的矩形？

Question

您好，我正在处理HTML中的注释内容。 我在画布上放了一个视频，在上面放了一层，在那一层上，我使用从JSON文件中获取的数据绘制了一个矩形（通过视频进行对象检测）。

现在的问题是我无法调整大小并拖动它。但是我可以自动绘制矩形。click here

这是我关注的click here

的jsfiddle链接

`function add(x,y,width,height,a,j) 
                    { 
                        rect = {
                                startX: x,
                                startY: y ,
                                w: width,
                                h: height
                        }
                    drawnew(startX,startY,w,h);
                    }

                    function drawnew(startX,startY,w,h) {
                           // ctx.fillStyle = "#222222";
                            ctx.lineWidth = "2";
                            ctx.strokeStyle = "red";
                            ctx.rect(rect.startX, rect.startY, rect.w, rect.h);
                            ctx.stroke();
                            drawHandles();
                    }

                    function drawHandles() {
                        drawCircle(rect.startX, rect.startY, closeEnough);
                        drawCircle(rect.startX + rect.w, rect.startY, closeEnough);
                        drawCircle(rect.startX + rect.w, rect.startY + rect.h, closeEnough);
                        drawCircle(rect.startX, rect.startY + rect.h, closeEnough);
                    }

                    function drawCircle(x, y, radius) {
                        ctx.fillStyle = "#FF0000";
                        ctx.beginPath();
                        ctx.arc(x, y, radius, 0, 2 * Math.PI);
                        ctx.stroke();
                        ctx.fill();
                    }

                    function mouseDown(e) {
                            mouseX = e.pageX - this.offsetLeft;
                            mouseY = e.pageY - this.offsetTop;

                            // if there isn't a rect yet
                            if (rect.w === undefined) {
                                rect.startX = mouseY;
                                rect.startY = mouseX;
                                dragBR = true;
                            }

                            // if there is, check which corner
                            //   (if any) was clicked
                            //
                            // 4 cases:
                            // 1. top left
                            else if (checkCloseEnough(mouseX, rect.startX) && checkCloseEnough(mouseY, rect.startY)) {
                                dragTL = true;
                            }
                            // 2. top right
                            else if (checkCloseEnough(mouseX, rect.startX + rect.w) && checkCloseEnough(mouseY, rect.startY)) {
                                dragTR = true;

                            }
                            // 3. bottom left
                            else if (checkCloseEnough(mouseX, rect.startX) && checkCloseEnough(mouseY, rect.startY + rect.h)) {
                                dragBL = true;

                            }
                            // 4. bottom right
                            else if (checkCloseEnough(mouseX, rect.startX + rect.w) && checkCloseEnough(mouseY, rect.startY + rect.h)) {
                                dragBR = true;

                            }
                            // (5.) none of them
                            else {
                                // handle not resizing
                            }

                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                            drawnew();

                        }

                function checkCloseEnough(p1, p2) {
                    return Math.abs(p1 - p2) < closeEnough;
                }

                function mouseUp() {
                    dragTL = dragTR = dragBL = dragBR = false;
                }

                function mouseMove(e) {
                    mouseX = e.pageX - this.offsetLeft;
                    mouseY = e.pageY - this.offsetTop;
                    if (dragTL) {
                        rect.w += rect.startX - mouseX;
                        rect.h += rect.startY - mouseY;
                        rect.startX = mouseX;
                        rect.startY = mouseY;
                    } else if (dragTR) {
                        rect.w = Math.abs(rect.startX - mouseX);
                        rect.h += rect.startY - mouseY;
                        rect.startY = mouseY;
                    } else if (dragBL) {
                        rect.w += rect.startX - mouseX;
                        rect.h = Math.abs(rect.startY - mouseY);
                        rect.startX = mouseX;
                    } else if (dragBR) {
                        rect.w = Math.abs(rect.startX - mouseX);
                        rect.h = Math.abs(rect.startY - mouseY);
                    }
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    drawnew();
                }

`

我的代码：https://www.w3schools.com/code/tryit.asp?filename=FUH06TRV6CIJ