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

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

I have created a canvas using the following markup:

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

现在，如果我指定 width 和 height ，然后在画布上绘制的图纸会非常清晰。

Now, if I specify width and height here directly, then the drawings on canvas will be pretty sharp.

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

但是，这样一来，我无法灵活缩放画布以覆盖所有屏幕尺寸。使用 vh 或 vw 代替像素也不起作用。我尝试在JavaScript中设置它们，例如：

but this way I can't scale the canvas flexibly to cover every screen size. Using vh or vw instead of pixels doesn't work either. I tried setting them in JavaScript like:

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

这覆盖了整个画布，但线条变得模糊。在画布仍覆盖整个屏幕的情况下，是否可以通过某种方式获得清晰的图像？

this covered the whole canvas but made the lines blurry. Is there some way I can get sharp images while the canvas still covers whole screen?

我尝试使用以下方法：

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

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

but the objects on the canvas (for example a circle that I drew) are still blurry. When I open up devTools, I see the following markup:

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

因此，我想CSS仍在定义宽度和高度。

So, I guess width and height are still being defined by CSS.