我在 html 中静态定义了一个具有宽度和高度的画布元素。如果我尝试使用 JavaScript 动态调整其大小（设置新的宽度和高度 - 无论是在画布的属性上还是通过样式属性），我都会在 Firefox 中收到以下错误：
未捕获的异常：[异常...“对 WrappedNative 原型对象的非法操作”nsresult：“0x8057000c（NS_ERROR_XPC_BAD_OP_ON_WN_PROTO）”位置：“JS 框架 :: file:///home/russh/Desktop/test.html :: onclick ::第 1 行”数据：无]
是否可以调整此元素的大小，还是必须销毁它并动态创建一个新元素？
你没有发布你的代码，我怀疑你做错了什么。可以通过使用数字分配宽度和高度属性来更改大小：
canvasNode.width = 200; // in pixels
canvasNode.height = 100; // in pixels
至少它对我有用。确保您没有分配字符串（例如，“2cm”、“3in”或“2.5px”），并且不要弄乱样式。
实际上，这是一个公开可用的知识——你可以在HTML canvas 规范中阅读它的所有内容——它非常小而且信息量非常大。这是整个 DOM 界面：
interface HTMLCanvasElement : HTMLElement {
attribute unsigned long width;
attribute unsigned long height;
DOMString toDataURL();
DOMString toDataURL(in DOMString type, [Variadic] in any args);
DOMObject getContext(in DOMString contextId);
};
如您所见，它定义了 2 个属性width和height，并且它们都是unsigned long。
请注意，如果您的画布是静态声明的，您应该使用width和height属性，而不是样式，例如。这将起作用：
<canvas id="c" height="100" width="100" style="border:1px"></canvas>
<script>
document.getElementById('c').width = 200;
</script>
但是，这将不工作：
<canvas id="c" style="width: 100px; height: 100px; border:1px"></canvas>
<script>
document.getElementById('c').width = 200;
</script>
我刚遇到和你一样的问题，但发现了 toDataURL 方法，这证明很有用。
它的要点是将您当前的画布转换为 dataURL，更改您的画布大小，然后从您保存的 dataURL 将您拥有的内容绘制回您的画布中。
所以这是我的代码：
var oldCanvas = canvas.toDataURL("image/png");
var img = new Image();
img.src = oldCanvas;
img.onload = function (){
canvas.height += 100;
ctx.drawImage(img, 0, 0);
}
<div id="canvasdiv" style="margin: 5px; height: 100%; width: 100%;">
<canvas id="mycanvas" style="border: 1px solid red;"></canvas>
</div>
<script>
$(function(){
InitContext();
});
function InitContext()
{
var $canvasDiv = $('#canvasdiv');
var canvas = document.getElementById("mycanvas");
canvas.height = $canvasDiv.innerHeight();
canvas.width = $canvasDiv.innerWidth();
}
</script>
这刚刚对我有用：
<canvas id="c" height="100" width="100" style="border:1px solid red"></canvas>
<script>
var c = document.getElementById('c');
alert(c.height + ' ' + c.width);
c.height = 200;
c.width = 200;
alert(c.height + ' ' + c.width);
</script>