Javascript 设置缩放时画布x、y位置（JS）出现问题

我正在用鼠标事件绘制画布

我想使用

document.body.style.zoom = '80%';

但是当我使用这个代码时：

X，Y的位置是错误的

这是密码

function canvasX(clientX) {

    var bound = canvas.getBoundingClientRect();

    return (clientX - bound.left) * (canvas.width / bound.width);

}


function canvasY(clientY) {

    var bound = canvas.getBoundingClientRect();

    return (clientY - bound.top) * (canvas.height / bound.height);

}

尝试将layerX、layerY作为参数，但效果不佳

位置设置得更左（-）和更上（-）

如果您能帮助我在鼠标位置上应用缩放大小，那就太好了。

这是一种方法

const canvas=document.querySelector（“#容器画布”）；
const ctx=canvas.getContext（'2d'）；
让计数=0；
canvas.addEventListener（'mousemove'，（e）=>{
const pos=getElementRelativeMousePosition（e，画布）；
ctx.fillStyle=hsl（（计数+++%10）/10,1,0.5）；
ctx.fillRect（位置x-1，位置y-1，3，3）；
});
[…document.queryselectoral（'button'）].forEach（（elem）=>{
元素addEventListener（'单击'，（e）=>{
document.body.style.zoom=`${elem.textContent}`；
});
});
函数GetElementRelativeEmousePosition（e，elem）{
const rect=elem.getBoundingClientRect（）；
const css=getComputedStyle（document.body）；
返回{
x:e.clientX/css.zoom-rect.left，
y:e.clientY/css.zoom-rect.top，
};
}
功能hsl（h、s、l）{
返回'hsl（${h*360 | 0}，${s*100 | 0}%，${l*100 | 0}%）`；
}

canvas{
显示：块；
}
#容器{
利润率：20px；
边框：1px纯黑；
显示：内联块；
}

50%
75%
100%
125%
150%

有趣的用例。谢谢您的评论。看起来这个缩放在画布上工作。但我做了80%的风格缩放，因为我需要最小化整个身体元素。这就是为什么画布的缩放被改变了，我想解决这个问题！！这就是我想要的。谢谢你的帮助！运行上面的代码片段后，在HTML标记上设置zoom:.75，然后查看鼠标和绘制的实际形状之间的疯狂偏移。这就是我目前的困境。知道如何排序吗？不要设置缩放