Misregistration between paper.js and OpenSeadragon about microdraw

[r03ert0]

I have the impression that the misalignment appears only in computers with Retina displays. Is that your case?

[rdvincent]

My machine is definitely not a true "Retina" display, but I don't know the exact resolution. I will try to reproduce it on some other platforms as I get a chance. It looks like an issue with paper.js.

[r03ert0]

try this in the console:

window.devicePixelRatio

In a retina display you get 2.
I think that I found a fix. The thing is that the width value as an attribute is not the same as the width value as a style (one is twice the other). I'll try to implement the fix and push it asap.

[r03ert0]

The misregistration issue disappears when this line is commented our in initAnnotationOverlay (around line 1080):

magicV = viewer.world.getItemAt(0).getContentSize().x;

@hspitzer : You explained me what that line did but I don't remember what it was. Could you explain again please?

[hspitzer]

This line gets the size of the currently opened tileSource and sets the resolution of the paper.js canvas accordingly (using the magicV). The getContententSize() function gets the size of the image in pixels.

I wanted to set the resolution of the canvas to always have the size of the underlying image, so that you can always take the annotations as pixel values. Especially if the image sizes change (when not using the big brain) this is very important.

However, if retina displays display pixels differently, it makes sense that this line might be the culprit for the misregistation.

[r03ert0]

Commit dcd4f9c fixes the mis-alignment bug. The main point was to comment out line 1080 in the initAnnotationOverlay function (it's still left in the code).
I changed the way in which the canvas elements are created to make sure that we get the right canvas. This wasn't the case in the previous version, which produced a bug were drawing was performed in an invisible canvas.
I also changed the updateRegionList function to use jquery and make sure that no extraneous regions are left from one slice to the other.