Selected image is shifted

[Insiyaa]

The selected image obtained is shifted as shown in images below.

The code I used is as follows:

    element:                 null, // html element to use for overlay
    showSelectionControl:    true, // show button to toggle selection mode
    toggleButton:            null, // dom element to use as toggle button
    showConfirmDenyButtons:  true,
    styleConfirmDenyButtons: true,
    returnPixelCoordinates:  true,
    keyboardShortcut:        'c', // key to toggle selection mode
    rect:                    null, // initial selection as an OpenSeadragon.SelectionRect object
    allowRotation:           true, // turn selection rotation on or off as needed
    startRotated:            false, // alternative method for drawing the selection; useful for rotated crops
    restrictToImage:         true, // true = do not allow any part of the selection to be outside the image
    onSelection:             function(rect) {
                                // ctx = $(".openseadragon-canvas").children()[0].getContext("2d");
                                ctx = viewer.drawer.context;
                                // rect2 = viewer.world.getItemAt(0).getClip(rect);

                                imgData = ctx.getImageData(x=rect.x,y=rect.y,rect.width,rect.height);
                                loadImageToCanvas(imgData);
                                alert(rect + ' Center point: ' + rect.getCenter() + ' Degree rotation: ' + rect.getDegreeRotation());
                                // console.log(rect);
                            },
    navImages:               { // overwrites OpenSeadragon's options
        selection: {
            REST:   'selection_rest.png',
            GROUP:  'selection_grouphover.png',
            HOVER:  'selection_hover.png',
            DOWN:   'selection_pressed.png'
        },
        selectionConfirm: {
            REST:   'selection_confirm_rest.png',
            GROUP:  'selection_confirm_grouphover.png',
            HOVER:  'selection_confirm_hover.png',
            DOWN:   'selection_confirm_pressed.png'
        },
        selectionCancel: {
            REST:   'selection_cancel_rest.png',
            GROUP:  'selection_cancel_grouphover.png',
            HOVER:  'selection_cancel_hover.png',
            DOWN:   'selection_cancel_pressed.png'
        },
    }
});```

Am I doing anything wrong? 

[iangilman]

I'm not really familiar with this plugin, but you should figure out what coordinate system rect is in. See http://openseadragon.github.io/examples/viewport-coordinates/ for an overview of the OSD coordinate systems.

I think it might be in image coordinates, in which case you'll need to convert it to web coordinates before accessing the canvas directly. Furthermore, if you're on an HDPI screen (where the pixel density is anything other than 1) you'll need to compensate for that. For instance if your pixel density is 2, you'll need to multiply by 2 to get the actual canvas coordinates. To find the pixel density, use OpenSeadragon.pixelDensityRatio.

[7Q2019]

Have you solved it? I also encountered the same problem, how can I solve it?

[abrlam]

Try setting returnPixelCoordinates to false. Then convert the coordinates using viewer.viewport.viewportToViewerElementRectangle(rect).

Source: https://github.com/picturae/openseadragonselection/issues/7