P5.js项目：浏览器缩放限制与光标坐标匹配问题及解决方案

问题背景 #

开发P5.js项目时，需实现**仅允许用户缩小页面、禁止放大超过100%**的效果，通过CSS的max-width:100%、max-height:100%完成缩放限制后，出现光标坐标与图形位置不匹配的问题。

解决方案 #

调整canvas的样式设置，取消P5.js默认的宽度缩放规则，让canvas绘制尺寸与显示尺寸保持一致，即可解决坐标偏差问题。核心代码如下：

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

启用CSS缩放限制后，P5.js默认的canvas缩放逻辑会导致绘制区域和显示区域的比例错位，进而引发光标坐标与图形的匹配问题。设置width: unset能让canvas遵循自身绘制尺寸渲染，同时保留CSS的缩放限制，实现需求的同时保证坐标精准匹配。

内容的提问来源于stack exchange，提问作者Rox