How do I get the pixel of the length and width

Question

I am programming a code where whenever I drag the corners of the square, I am able to display the pixel value into units of the desired length that the user have dragged to.

For example: Here the user has already dragged the square and the value of the length shown at the side of the square.

Heres the link to my code: https://codepen.io/firassyazwani/pen/NWWKMGK

OR

I have written some codes:

    <script>
        var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                rect = {
                    x: 150,
                    y: 100,
                    w: 123,
                    h: 58
                },
        handlesSize = 8,
                currentHandle = false,
                drag = false;

        function init() {
            canvas.addEventListener('mousedown', mouseDown, false);
            canvas.addEventListener('mouseup', mouseUp, false);
            canvas.addEventListener('mousemove', mouseMove, false);
        }

        function point(x, y) {
            return {
                x: x,
                y: y
            };
        }

        function dist(p1, p2) {
            return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
        }

        function getHandle(mouse) {
            if (dist(mouse, point(rect.x, rect.y)) <= handlesSize)
                return 'topleft';
            if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize)
                return 'topright';
            if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize)
                return 'bottomleft';
            if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize)
                return 'bottomright';
            if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize)
                return 'top';
            if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize)
                return 'left';
            if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize)
                return 'bottom';
            if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize)
                return 'right';
            return false;
        }

        function mouseDown(e) {
            if (currentHandle)
                drag = true;
            draw();
        }

        function mouseUp() {
            drag = false;
            currentHandle = false;
            draw();
        }

        function mouseMove(e) {
            var previousHandle = currentHandle;
            if (!drag)
                currentHandle = getHandle(point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop));
            if (currentHandle && drag) {
                var mousePos = point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
                switch (currentHandle) {
                    case 'topleft':
                        rect.w += rect.x - mousePos.x;
                        rect.h += rect.y - mousePos.y;
                        rect.x = mousePos.x;
                        rect.y = mousePos.y;
                        break;
                    case 'topright':
                        rect.w = mousePos.x - rect.x;
                        rect.h += rect.y - mousePos.y;
                        rect.y = mousePos.y;
                        break;
                    case 'bottomleft':
                        rect.w += rect.x - mousePos.x;
                        rect.x = mousePos.x;
                        rect.h = mousePos.y - rect.y;
                        break;
                    case 'bottomright':
                        rect.w = mousePos.x - rect.x;
                        rect.h = mousePos.y - rect.y;
                        break;

                    case 'top':
                        rect.h += rect.y - mousePos.y;
                        rect.y = mousePos.y;
                        break;

                    case 'left':
                        rect.w += rect.x - mousePos.x;
                        rect.x = mousePos.x;
                        break;

                    case 'bottom':
                        rect.h = mousePos.y - rect.y;
                        break;

                    case 'right':
                        rect.w = mousePos.x - rect.x;
                        break;
                }
            }
            if (drag || currentHandle != previousHandle)
                draw();
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'black';
            ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
            if (currentHandle) {
                var posHandle = point(0, 0);
                switch (currentHandle) {
                    case 'topleft':
                        posHandle.x = rect.x;
                        posHandle.y = rect.y;
                        break;
                    case 'topright':
                        posHandle.x = rect.x + rect.w;
                        posHandle.y = rect.y;
                        break;
                    case 'bottomleft':
                        posHandle.x = rect.x;
                        posHandle.y = rect.y + rect.h;
                        break;
                    case 'bottomright':
                        posHandle.x = rect.x + rect.w;
                        posHandle.y = rect.y + rect.h;
                        break;
                    case 'top':
                        posHandle.x = rect.x + rect.w / 2;
                        posHandle.y = rect.y;
                        break;
                    case 'left':
                        posHandle.x = rect.x;
                        posHandle.y = rect.y + rect.h / 2;
                        break;
                    case 'bottom':
                        posHandle.x = rect.x + rect.w / 2;
                        posHandle.y = rect.y + rect.h;
                        break;
                    case 'right':
                        posHandle.x = rect.x + rect.w;
                        posHandle.y = rect.y + rect.h / 2;
                        break;
                }
                ctx.globalCompositeOperation = 'xor';
                ctx.beginPath();
                ctx.arc(posHandle.x, posHandle.y, handlesSize, 0, 2 * Math.PI);
                ctx.fill();
                ctx.globalCompositeOperation = 'source-over';
            }
        }

        init();
        draw();
    </script>

Answer 1

Here is the code where pixel width and height are shown on sides.

https://codepen.io/mordecaii/pen/dyybeVg

var canvas = document.getElementById('canvas'),
                    ctx = canvas.getContext('2d'),
                    rect = {
                        x: 150,
                        y: 100,
                        w: 123,
                        h: 58
                    },
            handlesSize = 8,
                    currentHandle = false,
                    drag = false,
                    prevW = rect.w,
                    prevH = rect.h;

            function init() {
                canvas.addEventListener('mousedown', mouseDown, false);
                canvas.addEventListener('mouseup', mouseUp, false);
                canvas.addEventListener('mousemove', mouseMove, false);
            }

            function point(x, y) {
                return {
                    x: x,
                    y: y
                };
            }

            function dist(p1, p2) {
                return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
            }

            function getHandle(mouse) {
                if (dist(mouse, point(rect.x, rect.y)) <= handlesSize)
                    return 'topleft';
                if (dist(mouse, point(rect.x + rect.w, rect.y)) <= handlesSize)
                    return 'topright';
                if (dist(mouse, point(rect.x, rect.y + rect.h)) <= handlesSize)
                    return 'bottomleft';
                if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h)) <= handlesSize)
                    return 'bottomright';
                if (dist(mouse, point(rect.x + rect.w / 2, rect.y)) <= handlesSize)
                    return 'top';
                if (dist(mouse, point(rect.x, rect.y + rect.h / 2)) <= handlesSize)
                    return 'left';
                if (dist(mouse, point(rect.x + rect.w / 2, rect.y + rect.h)) <= handlesSize)
                    return 'bottom';
                if (dist(mouse, point(rect.x + rect.w, rect.y + rect.h / 2)) <= handlesSize)
                    return 'right';
                return false;
            }

            function mouseDown(e) {
                if (currentHandle)
                    drag = true;
                draw();
            }

            function mouseUp() {
                drag = false;
                currentHandle = false;
                prevW = rect.w;
                prevH = rect.h;
                draw();
            }

            function mouseMove(e) {
                var previousHandle = currentHandle;
                if (!drag)
                    currentHandle = getHandle(point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop));
                if (currentHandle && drag) {
                    var mousePos = point(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
                    switch (currentHandle) {
                        case 'topleft':
                            rect.w += rect.x - mousePos.x;
                            rect.h += rect.y - mousePos.y;
                            rect.x = mousePos.x;
                            rect.y = mousePos.y;
                            break;
                        case 'topright':
                            rect.w = mousePos.x - rect.x;
                            rect.h += rect.y - mousePos.y;
                            rect.y = mousePos.y;
                            break;
                        case 'bottomleft':
                            rect.w += rect.x - mousePos.x;
                            rect.x = mousePos.x;
                            rect.h = mousePos.y - rect.y;
                            break;
                        case 'bottomright':
                            rect.w = mousePos.x - rect.x;
                            rect.h = mousePos.y - rect.y;
                            break;

                        case 'top':
                            rect.h += rect.y - mousePos.y;
                            rect.y = mousePos.y;
                            break;

                        case 'left':
                            rect.w += rect.x - mousePos.x;
                            rect.x = mousePos.x;
                            break;

                        case 'bottom':
                            rect.h = mousePos.y - rect.y;
                            break;

                        case 'right':
                            rect.w = mousePos.x - rect.x;
                            break;
                    }
                }
                if (drag || currentHandle != previousHandle)
                    draw();
            }

            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = 'black';
                ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
                if (currentHandle) {
                    var posHandle = point(0, 0);
                    switch (currentHandle) {
                        case 'topleft':
                            posHandle.x = rect.x;
                            posHandle.y = rect.y;
                            break;
                        case 'topright':
                            posHandle.x = rect.x + rect.w;
                            posHandle.y = rect.y;
                            break;
                        case 'bottomleft':
                            posHandle.x = rect.x;
                            posHandle.y = rect.y + rect.h;
                            break;
                        case 'bottomright':
                            posHandle.x = rect.x + rect.w;
                            posHandle.y = rect.y + rect.h;
                            break;
                        case 'top':
                            posHandle.x = rect.x + rect.w / 2;
                            posHandle.y = rect.y;
                            break;
                        case 'left':
                            posHandle.x = rect.x;
                            posHandle.y = rect.y + rect.h / 2;
                            break;
                        case 'bottom':
                            posHandle.x = rect.x + rect.w / 2;
                            posHandle.y = rect.y + rect.h;
                            break;
                        case 'right':
                            posHandle.x = rect.x + rect.w;
                            posHandle.y = rect.y + rect.h / 2;
                            break;
                    }
                    ctx.globalCompositeOperation = 'xor';
                    ctx.beginPath();
                    ctx.arc(posHandle.x, posHandle.y, handlesSize, 0, 2 * Math.PI);
                    ctx.fill();
                    ctx.globalCompositeOperation = 'source-over';
                }
                if (drag) {
                  if (rect.w != prevW) {
                    ctx.fillText(rect.w, 
                                rect.x + rect.w / 2 - 5, 
                                rect.y - 10);
                  }
                  if (rect.h != prevH) {
                    ctx.fillText(rect.h, 
                                rect.x + rect.w + 10, 
                                rect.y + rect.h / 2 + 5);
                  }
                }
            }

            init();
            draw();