Javascript 为什么我的画布背景会变成蓝色，即使我说要放置网格？

我的老师让我用javascript、html和css制作一个蛇游戏，但我真的不知道如何改变游戏区域的背景。我是初学者，所以我知道我的代码可能不好，请提前道歉

       #gameCanvas {
          position: absolute;
          top: 60%;
          left: 50%;
          transform: translate(-50%, -50%);
          border: 5px solid black;
          background-image:
            linear-gradient(90deg, #333 30px, white 30px),
            linear-gradient(90deg, white 30px, #333 30px),
            linear-gradient(90deg, #333 30px, white 30px);
          background-position: 0 0, 0 30px, 0 60px;
          background-repeat: repeat-x;
          background-size: 60px 30px, 60px 30px, 60px 30px;
          margin: 15px auto;
          border-radius: 12px;
          background-size: repeat;
        }
var gameCanvas = document.getElementById("gameCanvas");
var ctx = gameCanvas.getContext("2d");


function Canvas() {
  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
 ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
}


function drawFood() {
 ctx.fillStyle = "red";
 ctx.strokestyle = "darkred";
 ctx.fillRect(foodX, foodY, 10, 10);
 ctx.strokeRect(foodX, foodY, 10, 10);
}


    function make_snake() {
      snake.forEach(draw_snake)
    }


    function draw_snake(snakePart) {
      ctx.fillStyle = "pink";
      ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
      ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
    }

---

我希望gameCanvas背景是一个网格，它实际上适合snake，但正如您从代码中看到的，在一开始，当您刷新页面时，您可以看到某种网格，但它被更新为蓝色背景，甚至不适合整个画布。

请删除与问题不直接相关的任何内容-也称为调试。请观察

canvas（）

函数<代码>ctx.fillStyle=“蓝色”通过删除ctx.fillStyle=“blue”；画布不会显示，运行代码将显示一个带有5px黑色边框的正方形，其中包含空内容。顺便说一句，我编辑了代码。。仍然没有找到我一直在寻找的东西，很遗憾：(