Javascript windows缩放画布上html5形状的位置存在问题

我有openseadragon，我在图像上画圆圈。 在我的屏幕上（1920*1080），一切正常。该网站反应迅速，我在openseadragon画布上画的圆圈位置正确

在另一个屏幕（2560*1440）上，用户还将windows缩放选项设置为125%：

它在2560*1440和100%比例下工作，但在125%比例下，我绘制的圆会移动：

它们在图像中的位置与100%比例不同。看起来我画圆圈的整个区域都向左移动了

对于openseadragon，我使用函数imageToViewportCoordinates来获得视口坐标，在100%和125%的比例上，这些当然与这里只涉及的图像坐标相同

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

画布本身的接缝大小不同。

---

如果视口坐标正确，有人知道这里的问题是什么吗？

我可以用以下方法解决我的问题：

        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();

---

前三行也是最后一行是我添加的。这解决了我的浏览器缩放问题

您能提供一个工作示例来清楚地说明问题吗？另外，你提到的“窗口缩放选项”来自哪里？它是你的操作系统的一部分还是浏览器的一个功能？