Javascript 缩放时图元偏移量的变化

我有一块画布。我需要用它做三件事：缩放、移动和指向像素。 我很容易做出第一个，但是第二个会引起一些问题。 我是这样做的（我想把一个正方形放在所需像素的中心位置）：

chosenPixelShower

只是一个div，我需要放置

位置：absolute

我从

onclick

事件中获取chosenPixel：

canvas.onclick = choosePixel;
function choosePixel(e)
{
    chosenPixel = {"x": Math.floor(e.offsetX / 2), "y": Math.floor(e.offsetY / 2)};
}

它在

scale=1

上运行良好，但是如果我以这种方式更改

canvas

的比例，它将开始指向更高的位置和左侧。看起来OffsetLight、offsetLeft等给出的值并不正确：

canvas.style.transform = `translate(-50%, -50%) scale(${scale})`;

有没有办法解决这个问题，让我得到想要的

另外，HTML结构如下所示：

<div id='main'>
    <canvas id="canvas" width='3180px' height='800px'></canvas>
    <div id='chosenPixelShower'></div>
</div>

其中#main绝对位于0左侧，0顶部，高度100%，宽度80%

<div id='main'>
    <canvas id="canvas" width='3180px' height='800px'></canvas>
    <div id='chosenPixelShower'></div>
</div>