Javascript 画布-未捕获类型错误：无法读取属性'；getContext'；空的

我刚接触Canvas，在Codepen上试用过。我一直收到错误-

uncaughttypeerror:无法读取null的属性“getContext”

我已经阅读了很多关于StackOverflow上相同错误的类似问题，并尝试了提供的一些解决方案，但似乎都不起作用

这是因为HTML是在JavaScript之前加载的，正如一些答案所暗示的那样？不幸的是，我不认为我能在Codepen上做出这样的改变

我还尝试将其包装在

$（document.ready（function（）{}）中使用jQuery，但这也不起作用

基本上，我有这个
元素-

我正在尝试使用下面的JavaScript创建一个矩形和一些文本-

function doRed() {
  var id1 = document.getElementById("mycanvas");
  id1.style.backgroundColor = "red";
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "purple";
  context.fillRect(10,10,60,60);

  context.fillStyle = "black";
  context.font = "30px Arial";
  context.text = "Hello";
}


如果有人能告诉我出了什么问题，那会很有帮助的。谢谢
 你的电脑刚刚输入了一个错误。myCanvas到myCanvas应该可以修复它。将更改附加到代码段中


函数changeColor（）{
var id2=document.getElementById（“div2”）；
id2.classList.add（“pinkback”）；
}
函数changeButton（）{}
函数doRed（）{
var canvas=document.getElementById（“mycanvas”）；
canvas.style.backgroundColor=“红色”；
var context=canvas.getContext（“2d”）；
context.fillStyle=“紫色”；
context.fillRect（10,10,60,60）；
context.fillStyle=“黑色”；
context.font=“30px Arial”；
context.text=“你好”；
}
函数doBlue（）{
var id1=document.getElementById（“mycanvas”）；
id1.style.backgroundColor=“蓝色”；
}
h1{
颜色：红色；
}
div{
背景颜色：黄色；
}
#第一组{
字体系列：helvetica；
}
#第二组{
字体大小：36px；
}
.橘子回溯{
背景颜色：橙色；
}
黄背蛇{
背景颜色：黄色；
}
布鲁贝克先生{
背景颜色：蓝色；
}
平贝克先生{
背景颜色：粉红色；
}
帆布{
宽度：200px；
高度：100px；
}
主标题
您的电脑刚刚输入了一个错误。myCanvas到myCanvas应该可以修复它。将更改附加到代码段中


函数changeColor（）{
var id2=document.getElementById（“div2”）；
id2.classList.add（“pinkback”）；
}
函数changeButton（）{}
函数doRed（）{
var canvas=document.getElementById（“mycanvas”）；
canvas.style.backgroundColor=“红色”；
var context=canvas.getContext（“2d”）；
context.fillStyle=“紫色”；
context.fillRect（10,10,60,60）；
context.fillStyle=“黑色”；
context.font=“30px Arial”；
context.text=“你好”；
}
函数doBlue（）{
var id1=document.getElementById（“mycanvas”）；
id1.style.backgroundColor=“蓝色”；
}
h1{
颜色：红色；
}
div{
背景颜色：黄色；
}
#第一组{
字体系列：helvetica；
}
#第二组{
字体大小：36px；
}
.橘子回溯{
背景颜色：橙色；
}
黄背蛇{
背景颜色：黄色；
}
布鲁贝克先生{
背景颜色：蓝色；
}
平贝克先生{
背景颜色：粉红色；
}
帆布{
宽度：200px；
高度：100px；
}
主标题
您的脚本出现打字错误
myCanvas
应改为
myCanvas
。
您还可以多次查询画布，使用变量中
document.getElementById（）
的结果可以最小化dom查询

示例如下：


//缓存结果
var canvas=document.getElementById（“mycanvas”），
context=canvas.getContext（“2d”）；
函数doRed（）{
clearRect（0，0，canvas.width，canvas.height）；
canvas.style.backgroundColor=“红色”；
context.fillStyle=“紫色”；
context.fillRect（10,10,60,60）；
context.fillStyle=“黑色”；
context.font=“30px Arial”；
context.fillText=“Hello”；
}
函数doBlue（）{
clearRect（0，0，canvas.width，canvas.height）；
canvas.style.backgroundColor=“蓝色”；
}
h1{
颜色：红色；
}
div{
背景颜色：黄色；
}
#第一组{
字体系列：helvetica；
}
#第二组{
字体大小：36px；
}
.橘子回溯{
背景颜色：橙色；
}
黄背蛇{
背景颜色：黄色；
}
布鲁贝克先生{
背景颜色：蓝色；
}
平贝克先生{
背景颜色：粉红色；
}
帆布{
宽度：200px；
高度：100px；
}
主标题
您的脚本出现打字错误
myCanvas
应改为
myCanvas
。
您还可以多次查询画布，使用变量中
document.getElementById（）
的结果可以最小化dom查询

示例如下：


//缓存结果
var canvas=document.getElementById（“mycanvas”），
context=canvas.getContext（“2d”）；
函数doRed（）{
clearRect（0，0，canvas.width，canvas.height）；
canvas.style.backgroundColor=“红色”；
context.fillStyle=“紫色”；
context.fillRect（10,10,60,60）；
context.fillStyle=“黑色”；
context.font=“30px Arial”；
context.fillText=“Hello”；
}
函数doBlue（）{
clearRect（0，0，canvas.width，canvas.height）；
canvas.style.backgroundColor=“蓝色”；
}
h1{
颜色：红色；
}
div{
背景颜色：黄色；
}
#第一组{
字体系列：helvetica；
}
#第二组{
字体大小：36px；
}
.橘子回溯{
背景颜色：橙色；
}
黄背蛇{
背景颜色：黄色；
}
布鲁贝克先生{
背景颜色：蓝色；
}
平贝克先生{
背景颜色：粉红色；
}
帆布{
宽度：200px；
高度：100px；
}
主标题
Typo:
myCanvas
=>
myCanvas
（也不是错误，但是您的
id1
变量已经引用了该画布，您不需要
canvas
变量。）Typo:
myCanvas
=>
myCanvas
（另外，不是错误，但是您的
id1
变量已经引用了该画布，您不需要
canvas
变量。）当你在画画的时候，你也可以修正
上下文。文本
排印和逻辑排印：只画一次，从
doRed
中，或者至少在再次画画之前清理画布…@kaido谢谢你的评论，我对我的回答做了一次编辑，但没有用…
f