为何通过style设置JavaScript Canvas尺寸会失效？

Canvas元素有两个核心尺寸概念，搞混它们就会出现你遇到的问题：

• 绘图缓冲区尺寸：由Canvas元素的width和height属性控制，这是Canvas内部用于绘制图形的实际像素画布大小，默认值为300px×150px。
• 元素显示尺寸：由CSS样式控制，这是Canvas元素在页面上呈现的视觉大小。

选项a（CSS设置尺寸）失效的原因 #

当你通过canvas.setAttribute('style','width:500px; height:500px;')设置样式时，仅修改了Canvas在页面上的显示大小，但内部的绘图缓冲区仍保持默认的300×150像素。这相当于把一张300×150的图片强行拉伸到500×500显示，绘制的图形（比如代码里的圆形）会被严重拉伸变形，看起来完全不符合预期，因此会觉得“失效”。

正确的设置方式（选项b） #

直接设置Canvas的width和height属性：

canvas.width = 500;
canvas.height = 500;

这种方式会同步更新内部绘图缓冲区的尺寸和元素的默认显示尺寸，确保绘制的图形比例正常，不会出现拉伸变形的问题。

选项c（默认尺寸） #

不做任何尺寸设置时，Canvas会使用默认的300px×150px绘图缓冲区尺寸，显示尺寸也对应这个大小。

完整示例代码 #

<html>
  <head>
    <meta charset="utf-8">
    <style>
canvas { outline:1px dotted black; } 
    </style>
  </head>
  <body>
    <script>
  "use strict";
  let option = prompt('a, b, or c','a');
  let canvas = document.createElement('canvas');
  canvas.setAttribute('id','canvas');
  switch(option) {
  case 'a': // 用style设置尺寸 - 图形会拉伸变形
    canvas.setAttribute('style','width:500px; height:500px;');
    break;
  case 'b': // 用.width/.height设置尺寸 - 图形比例正常
    canvas.width = 500;
    canvas.height = 500;
    break;
  case 'c':
  default: // 默认尺寸（300×150）
    option = 'c';
  }
  document.body.appendChild(canvas);
  let ctx = canvas.getContext("2d")
  ctx.font = '20px Ariel';
  ctx.fillText('Option: '+option,10,20);
  ctx.arc(250,250,200, 0, 6.2832);
  ctx.stroke();
    </script>
  </body>
</html>

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