无法拖动正方形的角

Question

我希望用户能够拖动正方形的角，但是它不起作用。我认为代码中的某处不正确。

以下是代码的链接：https://codepen.io/firassyazwani/pen/MWWKMeJ

 var canvas2 = document.getElementById('canvas2');
            var ctx2 = canvas2.getContext('2d'),
                    rect1 = {
                        x1: 100,
                        y1: 100,
                        w1: 100,
                        h1: 100
                    },
            handlesSize1 = 8,
                    currentHandle1 = false,
                    drag1 = false;

            function init1() {
                canvas2.addEventListener('mousedown1', mouseDown1, false);
                canvas2.addEventListener('mouseup1', mouseUp1, false);
                canvas2.addEventListener('mousemove1', mouseMove1, false);
            }

            function point1(x1, y1) {
                return {
                    x1: x1,
                    y1: y1
                };
            }

            function dist1(p11, p21) {
                return Math.sqrt((p21.x1 - p11.x1) * (p21.x1 - p11.x1) + (p21.y1 - p11.y1) * (p21.y1 - p11.y1));
            }

            function getHandle1(mouse1) {
                if (dist1(mouse1, point1(rect1.x1, rect1.y1)) <= handlesSize1)
                    return 'topleft1';
                if (dist1(mouse1, point1(rect1.x1 + rect1.w1, rect1.y1)) <= handlesSize1)
                    return 'topright1';
                if (dist1(mouse1, point1(rect1.x1, rect1.y1 + rect1.h1)) <= handlesSize1)
                    return 'bottomleft1';
                if (dist1(mouse1, point1(rect1.x1 + rect1.w1, rect1.y1 + rect1.h1)) <= handlesSize1)
                    return 'bottomright1';
            }

            function mouseDown1(e) {
                if (currentHandle1)
                    drag1 = true;
                draw1();
            }

            function mouseUp1() {
                drag1 = false;
                currentHandle1 = false;
                draw1();
            }

            function mouseMove1(e1) {
                var previousHandle1 = currentHandle1;
                if (!drag1)
                    currentHandle1 = getHandle1(point1(e1.pageX - this.offsetLeft, e1.pageY - this.offsetTop));
                if (currentHandle1 && drag1) {
                    var mousePos1 = point1(e1.pageX - this.offsetLeft, e1.pageY - this.offsetTop);
                    switch (currentHandle1) {
                        case 'topright1':
                            rect1.w1 = rect1.h1;
                            rect1.h1 += rect1.y1 - mousePos1.y1;
                            rect1.y1 = mousePos1.y1;
                            break;
                        case 'bottomright1':
                            rect1.w1 = rect1.h1;
                            rect1.h1 = mousePos1.y1 - rect1.y1;
                            break;
                        case 'topleft1':
                            rect1.w1 += rect1.x1 - mousePos1.x1;
                            rect1.h1 += rect1.y1 - mousePos1.y1;
                            rect1.x1 = rect1.y1;
                            rect1.y1 = mousePos1.y1;
                            rect1.w1 = rect1.h1;
                            break;
                        case 'bottomleft1':
                            rect1.w1 += rect1.x1 - mousePos1.x1;
                            rect1.h1 = rect1.w1;
                            rect1.x1 = mousePos1.x1;
                            break;
                    }
                }

                if (drag1 || currentHandle1 != previousHandle1)
                    draw1();
            }

            function draw1() {
                ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
                ctx2.fillStyle = '#FFC0CB';
                ctx2.strokeStyle = "#000000";
                ctx2.font = "30px Comic Sans MS";
                ctx2.strokeText("?",
                        rect1.x1 + rect1.w1 + 10,
                        rect1.y1 + rect1.h1 / 2 + 5), (20);
                ctx2.lineWidth = 4;
                var fillRect1 = true;
                ctx2.rect(rect1.x1, rect1.y1, rect1.w1, rect1.h1);
                if (fillRect1) {
                    ctx2.fill();
                }
                ctx2.stroke();
                if (currentHandle1) {
                    var posHandle1 = point1(0, 0);
                    switch (currentHandle1) {
                        case 'topright1':
                            posHandle1.x1 = rect1.x1 + rect1.w1;
                            posHandle1.y1 = rect1.y1;
                            break;
                        case 'bottomright1':
                            posHandle1.x1 = rect1.x1 + rect1.w1;
                            posHandle1.y1 = rect1.y1 + rect1.h1;
                            break;
                        case 'topleft1':
                            posHandle1.x1 = rect1.x1;
                            posHandle1.y1 = rect1.y1;
                            break;
                        case 'bottomleft1':
                            posHandle1.x1 = rect1.x1;
                            posHandle1.y1 = rect1.y1 + rect1.h1;
                            break;
                    }
                    ctx2.globalCompositeOperation = 'xor';
                    ctx2.beginPath();
                    ctx2.arc(posHandle1.x1, posHandle1.y1, handlesSize1, 0, 2 * Math.PI);
                    ctx2.fill();
                    ctx2.globalCompositeOperation = 'source-over';
                }
            }
            init1();
            draw1();

 <canvas id="canvas2" width="310" height="310" style="border:1px solid #000000;"></canvas>