如何使用createElement（）创建后调整HTML Canvas对象的大小？

Question

我用这段JavaScript代码创建一个HTML Canvas对象：

var Canvas = document.createElement("canvas"); 
Canvas.style.width = "500px"; 

然后我在它绘制文本。

当显示画布时，整个画布已被放大（包括内容）以匹配500px宽度，这会导致难看的重新采样。我真正想要的是，内容保持相同的大小，只有画布本身变得更大。

任何想法？

Answer 1

尝试更改元素的宽度而不是其CSS宽度。

Canvas.width = 500; 

Answer 2

托马斯的答案是正确的，但它听起来就像你也想保留画布上的现有内容。当您更改画布大小时，会自动清除并重置为默认状态。因此，您需要重新绘制内容，或将内容复制到另一个Canvas（使用drawImage），调整画布大小，然后将内容复制回来（再次使用drawImage）。