为什么Canvas画布上显示黑色矩形而非预期的黑色正方形？

问题出在Canvas元素的绘图缓冲区尺寸和显示尺寸不匹配。

Canvas存在两个独立的尺寸属性：

• 绘图缓冲区尺寸：由canvas标签的width和height属性定义，这是Canvas内部用于绘制图形的实际像素画布，默认值为300px宽、150px高。
• 显示尺寸：通过CSS设置的width和height，决定了Canvas在页面上呈现的大小。

你仅通过CSS将Canvas的显示尺寸改为800x800，但未设置它的绘图缓冲区尺寸，导致内部300x150的画布被强制拉伸到800x800的显示区域，原本的正方形因此被拉成矩形。

解决方法 #

给canvas标签添加与CSS显示尺寸一致的width和height属性，让绘图缓冲区与显示区域尺寸匹配，绘制的图形就不会变形了。

修改后的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    canvas {
      width: 800px;
      height: 800px;
      border: 3px solid black;
    }
  </style>
</head>

<body>
  <canvas id="cv" class="cav" width="800" height="800"></canvas>
  <script>
    var canvas = document.getElementById('cv')
    var context = canvas.getContext('2d')
    context.fillRect(30, 30, 150, 150)
  </script>
</body>

</html>

如果需要动态调整Canvas尺寸，建议通过JavaScript直接设置canvas.width和canvas.height属性，而非仅修改CSS样式，以此保证绘图区域与显示区域的比例始终一致。

内容的提问来源于stack exchange，提问作者World Producer