浏览器缩放和光标坐标问题

Question

我正在使用P5.js做一个项目，我遇到了一个问题。我需要让用户缩小，而不是放大，超过100%的缩放。我用CSS实现了这一点(max-width: 100%， max-height: 100%)。但是需要以某种方式补偿坐标上的差异。这里有一个显示问题的草图的链接。

在任何屏幕上缩放时，保持正方形和光标坐标比例的最佳方法是什么?

UPD: I found a solution:

let cnv;

function setup() {
cnv=createCanvas(windowHeight, windowHeight );
cnv.style("width", 'unset');  
}

Answer 1

这将使鼠标坐标介于0和1之间:

text("Mouse position  = " + mouseX / width, 30, 40);

变量宽度是画布的宽度。