Javascript 画布未在JS/HTML中绘制

我遇到此错误：无法读取null的属性“getContext” 我查找了其他有这个问题的人，他们都在创建HTML div之前运行了JS，但我不是这样。 我已经将一个JSFIDLE与我的代码链接在一起，但它不能很好地工作，因为我有固定的元素。 有人请帮忙，我不知道发生了什么事。 JSFIDDLE：

HTML:

JavaScript:

$(function() {
var snakeX, snakeY;
var fruitX, fruitY;
var gameOver = true;
var direction = 0; //0 = null, 1 = left, 2 = right, 3 = up, 4 = down

function Draw() {
    var canvas = document.getElementById("playBoard");
    var ctx = canvas.getContext("2d");

    //Snake
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="green";
    ctx.fillRect(385,385,50,50);

}


function Setup() {
    gameOver = false;
    Draw();
}

window.onload = Setup;
});

---

编辑：我的画布元素有一个输入错误。这一问题已经解决。但是，问题仍然存在。

请仔细检查您的HTML。你的身份证放错地方了

<canvas>id="playBoard"</canvas>

应该是

<canvas id="playBoard"></canvas>

---

您在canvas元素上有一个输入错误。更改此项：

<canvas>id="playBoard"</canvas>

为此：

<canvas id="playBoard"></canvas>

---

换句话说，将id放在元素本身上

您试图用id playBoard选择元素，但您尚未将其分配给画布，可能只是输入错误

---

id=playBoard应该是

你是对的，但是即使我修复了这个窗口，它仍然不能工作；应该是window.onload=setup我修复了这个问题，但问题仍然存在我修复了这个问题，但问题仍然存在。我还没有在这个程序中为任何函数使用jQuery，虽然不需要抱歉，但只要修复这个错误和开发人员控制台中弹出的任何其他错误即可。按F12并查看console选项卡。我不知道如何在JSFIDLE中正确地包含jQuery。这在我的浏览器中不是问题，控制台只显示我概述的错误

<canvas>id="playBoard"</canvas>

<canvas id="playBoard"></canvas>