如何缩放 HTML5 画布而不使其变得模糊？

我使用以下标记创建了画布：

<canvas id="canvas"></canvas>

现在，如果我指定width and height直接在这里，那么画布上的图画就会非常清晰。

<canvas id="canvas" width="600px" height="400px"></canvas>

但这样我就无法灵活地缩放画布以覆盖每个屏幕尺寸。使用vh or vw而不是像素也不起作用。我尝试在 JavaScript 中设置它们，例如：

$('#canvas').css({
   "height": window.innerHeight,
   "width": window.innerWidth
 });

这覆盖了整个画布，但使线条变得模糊。有什么方法可以在画布仍然覆盖整个屏幕的情况下获得清晰的图像吗？

我尝试使用：

$("#canvas")
.prop("width", window.innerWidth)
.prop("height", window.innerHeight);

但画布上的对象（例如我画的圆圈）仍然模糊。当我打开 devTools 时，我看到以下标记：

<canvas id="canvas" style="height: 768px; width: 1366px;"></canvas>

所以，我猜宽度和高度仍然是由 CSS 定义的。

Canvas CSS 属性不会调整画布大小，而是会调整其大小。
您可以简单地使用 JS 更改属性：

$("#canvas")
    .prop("width", window.innerWidth)
    .prop("height", window.innerHeight);