I am using Panzoom to zoom and pan on a canvas where I have some points.

These points are clickable, and it works fine when not having zoomed the canvas (via Panzoom).

The zoom factor is 1 when unzoomed, 2 with 200% zoom etc..

I have made this function to calculate the coordinates when having panned - so you can pan around and click it, and the coordinates will always be relative. It's when zooming it's not working..

function getCanvasCoords(x,y){
    var matrix = $panzoom.panzoom("getMatrix");
    var calc_x = x-matrix[4];
    var calc_y = y-matrix[5];
    return {x:calc_x,y:calc_y};   
}

Try a working sample here: /

Click on the yellow square to get the clicked coordinates. Then zoom in and click on it again; now the coordinates are different because of the zooming.

Is there any way I can calculate the clicked coordinate when zoomed?

I have tried things like multiplying/dividing the clicked point with the zoom factor, but that doesn't help much..

I am using Panzoom to zoom and pan on a canvas where I have some points.

These points are clickable, and it works fine when not having zoomed the canvas (via Panzoom).

The zoom factor is 1 when unzoomed, 2 with 200% zoom etc..

I have made this function to calculate the coordinates when having panned - so you can pan around and click it, and the coordinates will always be relative. It's when zooming it's not working..

function getCanvasCoords(x,y){
    var matrix = $panzoom.panzoom("getMatrix");
    var calc_x = x-matrix[4];
    var calc_y = y-matrix[5];
    return {x:calc_x,y:calc_y};   
}

Try a working sample here: http://jsfiddle/hugef0c7/

Click on the yellow square to get the clicked coordinates. Then zoom in and click on it again; now the coordinates are different because of the zooming.

Is there any way I can calculate the clicked coordinate when zoomed?

I have tried things like multiplying/dividing the clicked point with the zoom factor, but that doesn't help much..

• javascript
• jquery
• html
• canvas

1 Answer 1

First step is to correct the offset of the coordinates in order to make them relative to canvas. You can do this by simply subtracting the absolute position of canvas to the client coordinates in this function:

$(document).mouseup(function(e) {

    // get canvas rectangle with absolute position of element
    var rect = myCanvas.getBoundingClientRect();

    // subtract position from the global coordinates
    var coords = getCanvasCoords(e.clientX - rect.left,
                                 e.clientY - rect.top);
    ...

Now all you need to do is to inverse the zoom factor (1 / factor) to get back to the intended coordinate, as well as using the scale values in the matrix (a and d, or 0 and 3 in index terms):

function getCanvasCoords(x,y){

    var matrix = $panzoom.panzoom("getMatrix");

    return {
        x: x * (1 / matrix[0]),  // multiply with inverse zoom factor
        y: y * (1 / matrix[3])
    };
}

That should do the job.

Modified fiddle

Hope this helps!