重新调整画布尺寸而不减小其宽度和高度（坐标）

Question

我在画布上绘制了一张图片，并根据用户点击鼠标绘制了一些点。我使用数学计算，一旦用户将鼠标悬停在工具提示上，就会在图片中显示一些面板名称。我使用画布坐标和缩放百分比。 我的问题是，当我将窗口重新调整为较小的窗口（我使用Mozilla响应模式移动设备）时，它会给出错误的坐标。

画布的实际尺寸为 - 460,550 在移动窗口模式下，它约为250,350

我使用了以下风格

#splatExteriorImage {
    background-image: url(../images/SPLAT1.jpg);
    background-size: cover;
    z-index: 0;
    background-color: #F5F5F5;
}

如何在不减小坐标的情况下重新调整画布大小。 在此先感谢，

Answer 1

画布渲染表面的尺寸与画布标签的尺寸无关。

例如：

<canvas width=400 height=300 style="width: 800px; height: 600px;"></canvas>

您可以独立于CSS中的高度更改绘图表面的宽度和高度。

要专门更改渲染表面的高度，请使用

setAttribute("height", "500");