如MDN web docs中所述，用于画布缩放：
默认情况下，画布上的一个单位正好是一个像素。例如，如果我们应用比例因子0.5，则结果单位将变为0.5像素，因此将以一半大小绘制形状。以类似的方式将缩放因子设置为2.0将增加单位大小，并且一个单位现在变为两个像素。这样就可以绘制两倍大的形状。
那么当我们出于缩放目的而增加画布的宽度/高度时，它的工作原理是否相同，或者只是拉伸图像，是否会影响图像质量？
答案 0 :(得分：1)
据我所知，这正是您所说的。更改画布尺寸时，图像会被拉伸，像素的插值方式与图像拉伸时相同。
在画布内部缩放时，例如，当缩放比例设置为2时，绘图引擎便知道要绘制2x2像素。因此图像保持“清晰”。
答案 1 :(得分：1)
画布上下文绘制方法要求我们在其方法中提供一些坐标和长度。
例如，x方法的y，width，height，fillRect(x y, width, height)。
所有这些值都是无单位的，所以我们将其命名为 magical-unit 。
由于画布是光栅图像，因此已决定首先，每个 magical-unit 代表此光栅图像的一个像素。当我们将画布设置为width或height时，我们只是在更改画布可以容纳的像素数。
因此，我们可以构建一个很好的 magical-unit-grid 的canvas.width * canvas.height *1。
在这种情况下，将(10, 10)作为参数传递给期望以 magical-units 表示的坐标的方法时，指针将移动到坐标10, 10处的像素。
现在，有些方法（例如scale()，translate()，transform()等）会修改我们的 magical-unit-grid 。
translate(5, 10)会将我们的 magical-unit-grid 水平移动5个 magical-units ，垂直移动10个。因此，现在坐标(10,10)实际上将指向坐标15, 20（10 + 5、10 + 10）的像素。
在调用scale(2, 2)之后，一个 magical-unit 现在将等于画布上的两个像素。因此，如果我们将(10, 10)传递给与上述相同的方法，则指针实际上将移动到坐标20, 20处的像素。
我们以前的图纸不会改变，画布的质量没有变化，唯一改变的是我们的 magical-unit 的值。
答案 2 :(得分：0)
如果直接更改画布HTML元素的width或height属性，则可以更改画布像素缓冲区的大小，并擦除画布上的所有先前内容。这不是缩放内容的有效方法：-）
通过更改CSS中画布的固有宽度或高度来调用CSS缩放。在CSS中大幅增加画布的尺寸可能会产生模糊效果，其方式类似于将图像查看器中的图像缩放到超出图像的信息内容。
如果在画布上绘制形状和线条之前更改画布缩放比例（通过其上下文对象），则绘制例程会将模糊限制在所绘制内容的边缘上限制为单个像素。通常，这类似于使用抗锯齿来渲染字体字符，并且可能不是不希望的。
2018-09年编辑CSS Images Module Level 3的草案提出了image-rendering属性，用于控制CSS缩放时如何插值图像。 lacks support在一些主要的浏览器中作为草稿发布时间。
另请参阅有关使用nearest neighbor interpolation to zoom canvas objects的相关问题。