get coordinates of a rectangle

Question

I want to add 4 text boxes which will give me the coordinates of a rectangle and if I manually edit the coordinates it should change /alter the rectangle as well. Please tell me how to proceed with this solution.

In my example if you click ROI it will draw a rectangle I want the upper and lower X and Y coordinates of the same.

the working fiddle is http://jsfiddle.net/qf6Ub/2/

    // references to canvas and context
var oImageBuffer = document.createElement('img');
var oCanvas = document.getElementById("SetupImageCanvas");
var o2DContext = oCanvas.getContext("2d");

// set default context states
o2DContext.lineWidth = 1;
o2DContext.translate(0.50, 0.50); // anti-aliasing trick for sharper lines

// vars to save user drawings
var layers = [];
var currentColor = "black";

// vars for dragging
var bDragging = false;
var startX, startY;

// vars for user-selected status
var $roiCheckbox = document.getElementById("btnROI");
var $layersCheckbox = document.getElementById("btnLAYER");
var $patches = document.getElementById('txtPatchCount');
var $mouse = document.getElementById("MouseCoords");
var roiIsChecked = false;
var layersIsChecked = false;
var patchCount = 0;

// listen for mouse events
oCanvas.addEventListener('mousedown', MouseDownEvent, false);
oCanvas.addEventListener('mouseup', MouseUpEvent, false);
oCanvas.addEventListener('mousemove', MouseMoveEvent, false);
oCanvas.addEventListener('mouseout', MouseOutEvent, false);

$("#txtPatchCount").keyup(function () {
    getStatus();
    // clear the canvas
    o2DContext.clearRect(0, 0, oCanvas.width, oCanvas.height);
    // redraw all previously saved line-pairs and roi
    for (var i = 0; i < layers.length; i++) {
        var layer = layers[i];
        if (layer.patchCount > 0) {
            layer.patchCount = patchCount;
        }
        draw(layer);
    }
});

// mouse event handlers

function MouseDownEvent(e) {
    e.preventDefault();
    startX = e.clientX - this.offsetLeft;
    startY = e.clientY - this.offsetTop;
    currentColor = randomColor();
    getStatus();
    bDragging = true;
}

function MouseUpEvent(e) {
    if (!bDragging) {
        return;
    }
    e.preventDefault();
    bDragging = false;
    mouseX = e.clientX - this.offsetLeft;
    mouseY = e.clientY - this.offsetTop;
    layers.push({
        x1: startX,
        y1: startY,
        x2: mouseX,
        y2: mouseY,
        color: currentColor,
        drawLayer: layersIsChecked,
        patchCount: patchCount,
    });
}

function MouseOutEvent(e) {
    MouseUpEvent(e);
}

function MouseMoveEvent(e) {
    if (!bDragging) {
        return;
    }

    var mouseX = e.clientX - this.offsetLeft;
    var mouseY = e.clientY - this.offsetTop;

    // clear the canvas
    o2DContext.clearRect(0, 0, oCanvas.width, oCanvas.height);

    // redraw all previously saved line-pairs and roi
    for (var i = 0; i < layers.length; i++) {
        draw(layers[i]);
    }

    // create a temporary layer+roi object
    var tempLayer = {
        x1: startX,
        y1: startY,
        x2: mouseX,
        y2: mouseY,
        color: currentColor,
        drawLayer: layersIsChecked,
        patchCount: patchCount,
    };

    // draw the temporary layer+roi object
    draw(tempLayer);

    // Display the current mouse coordinates.
    $mouse.innerHTML = "(" + mouseX + "," + mouseY + ")" + patchCount;
}


function draw(layer) {


    if (layer.drawLayer) {

        // set context state
        o2DContext.lineWidth = 0.50;
        o2DContext.strokeStyle = layer.color;

        // draw parallel lines
        hline(layer.y1);
        hline(layer.y2);
    }

    if (layer.patchCount > 0) {

        // set context state
        o2DContext.lineWidth = 1.5;
        o2DContext.strokeStyle = '#0F0';

        // draw regions
        o2DContext.strokeRect(layer.x1, layer.y1, (layer.x2 - layer.x1), (layer.y2 - layer.y1));
        var w = layer.x2 - layer.x1;
        o2DContext.beginPath();
        for (var i = 1; i < layer.patchCount; i++) {
            var x = layer.x1 + i * w / layer.patchCount;
            o2DContext.moveTo(x, layer.y1);
            o2DContext.lineTo(x, layer.y2);
        }
        o2DContext.stroke();
    }


}
function getStatus() {
    roiIsChecked = $roiCheckbox.checked;
    layersIsChecked = $layersCheckbox.checked;
    patchCount = $patches.value;
    if (!roiIsChecked || !patchCount) {
        patchCount = 0;
    }
}

function randomColor() {
    return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

function hline(y) {
    o2DContext.beginPath();
    o2DContext.moveTo(0, y);
    o2DContext.lineTo(oCanvas.width, y);
    o2DContext.stroke();
}

Answer 1

            document.getElementById("MouseCoords").innerHTML = "(" + x + "," + y + "); "
                                                                +"("+ oPixel.x + "," + oPixel.y + "); "
                                                                +"("+ oCanvasRect.left + "," + oCanvasRect.top + ")";
        }

Answer 2

Ok, I went back to the drawing board and came up with this FIDDLE.

It provides the dimensions of the div and its location from the top and left of the container.

You can calculate the exact coordinates from those numbers.

JS

var divwidth = $('.coord').width();
var divheight = $('.coord').height();
var pos = $('.coord').offset();

$('#divdimensions').html(divwidth + ',' + divheight);
$('#divposition').html( pos.left + ',' + pos.top );