Javascript 非常基本的HTML5画布代码无法运行。这是我还是我的浏览器？

我正试图学习在一个项目中使用HTML5画布，刚刚开始使用一个在线教程（实际上是一个写得很漂亮的教程，这里是链接：）。然而，当我开始复制它时，它就不起作用了。我的浏览器是Chrome的最新版本，JavaScript正在运行，等等。我在visualstudio中工作，但在JSFiddle和我的简单文本编辑器上也无法工作

以下是HTML文件正文中的内容：

<canvas id="c" height="500" width="375"></canvas>


<script src="CanvasTest.js"></script>

下面是JavaScript：

document.addEventListener('DOMContentLoaded', domloaded, false);
function domloaded() {
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    context.beginPath();

    // Draw vertical lines
    for (var x = .5; x < 500; x += 10) {
        context.moveTo(x, 0);
        context.lineTo(x, 375);
    }

    // Draw horizontal lines
    for (let y = .5; y < 375; y += 10) {
        context.moveTo(0, y);
        context.lineTo(500, y);
    }

    context.strokeStyle = "#00000";
    context.stroke();
}

document.addEventListener（'DOMContentLoaded'，domloaded，false）；
函数domloadded（）{
var canvas=document.getElementById（'c'）；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
//画垂直线
对于（变量x=0.5；x<500；x+=10）{
moveTo（x，0）；
lineTo（x，375）；
}
//画水平线
对于（设y=0.5；y<375；y+=10）{
上下文。移动到（0，y）；
lineTo（500，y）；
}
context.strokeStyle=“#00000”；
stroke（）；
}

您正在使用一项功能

让

，将其更改为

var

---

这里有一个例子。

你把

let

而不是

var

放在for

循环中
我刚才看到了。我把高度和宽度弄混了。谢谢大家：）