Javascript TypeError:myCanvas.getContext不是函数

我正在开发一个使用canvas元素的Firefox扩展。它是通过编程方式添加的（canvas元素从一开始就不在那里，它是创建的，然后我尝试追加）

XUL（mozilla XML）中使用的代码非常简单，不添加任何元素，只使用公共标记加载脚本

我面临的问题是，首先，当 var myCtx=myCanvas.getContext（“2d”）； 运行时，firefox控制台错误返回TypeError:myCanvas.getContext不是函数

然后，另一个错误是，即使我不尝试绘制画布或任何东西，当我运行代码时，将画布附加到文档正文的行也不起作用，返回document.body时未定义

脚本如下：

endSelectBox : function(aEvent){
mouseX2 = aEvent.clientX;
mouseY2 = aEvent.clientY;

//Start creating new canvas to be added in this position.
var canvasWidth, canvasHeight;
canvasWidth = Math.abs(mouseX2 - mouseX); //Calculates canvas width to be used.
canvasHeight = Math.abs(mouseY2 - mouseY); //Calculates canvas height to be used.

alert("pre id height width");
//Set canvas values for size.
var myCanvas;
myCanvas = document.createElement("canvas");
myCanvas.setAttribute("id", "canvas1");
myCanvas.setAttribute("height", canvasHeight.toString());
myCanvas.setAttribute("width", canvasHeight.toString());

//Set canvas fixed position on the page.
alert("pre CSS");
var top = Math.max(mouseY, mouseY2);
top = top.toString();
top = top + "px";
var left = Math.min(mouseX, mouseX2);
left = left.toString();
left = left + "px";
myCanvas.style.top = top;
myCanvas.style.left = left;
//myCanvas.style.position = "fixed";

//Paint canvas interior.  //Not working because getContext returns null. No idea why, try to figure this out.
alert("pre painting");
var myCtx = myCanvas.getContext("2d");
alert("pre fillstyle");
myCtx.fillStyle = "#150000";
alert("pre fillrect");
myCtx.fillRect(0,0, canvasWidth - 1, canvasHeight - 1);

document.body.appendChild(myCanvas);// This never runs. WHY??
alert("worked"); 

---

}

在Firefox中从

要从browser.xul覆盖获取当前网页的文档，应使用content.document，而不仅仅是浏览器窗口本身的文档

---

因此，尝试用

内容更改所有
文档
。文档

应该可以解决您的问题。

解决方案是使用document.createElements（）函数创建元素，并且在访问文档时，正如用户powerc9000所说，我们需要使用content.document才能正确访问它。

---

干杯

是的，这是问题的一部分，但真正的问题是要创建元素，我应该使用createElements函数，以确保我使用的是html画布标记。但感谢您的部分解决方案：）