Search code examples
javascripthtml5-canvasviewportopenseadragon

Problem with position of html5 shape on canvas with windows scale

I have openseadragon and I draw circles on the image. On my screen (1920*1080), everything works. The site is responsive and the circles I draw on the canvas of openseadragon are on the correct position.

On a different screen(2560*1440) the user has also the windows scale option set to 125%: enter image description here

It works on 2560*1440 and 100% scale, but with 125% scale the circles I draw are shifted: enter image description here

They are not on the same position in the image as with the 100% scale. It looks like the whole area where i draw the circles are shifted to the left.

With openseadragon I use the function imageToViewportCoordinates to get the viewport coordinates and on 100% and 125% scale those are of course the same as only the image coordinates are involved here.

var realativCoordinates = this.viewer.viewport.imageToViewportCoordinates(this.x, this.y);

The canvas itself though seams to have a different size. Does somebody have an idea what the issue is here as the ViewportCoordinate are correct?

Solution

  • I was able to solve my issue with this:

            this.ctx.save();
        this.ctx.translate(0, 0);
        this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

        this.ctx.fillStyle = this.imageChannel == ImageChannel.Red ? 'rgba(255,115,94,0.5)' : 'rgba(48,150,48,0.5)';
        this.ctx.strokeStyle = this.imageChannel == ImageChannel.Red ? 'rgba(255,115,94,0.5)' : 'rgba(48,150,48,0.5)';
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        this.ctx.arc(Math.round(px.x), Math.round(px.y), radius, 0, 2 * Math.PI, false);
        this.ctx.stroke();
        this.ctx.fill();

        this.ctx.restore();

    the first three and last line is what i added. This fixed my problem with the browser zoom