title: Why does my canvas background go blue even if I said to put the grid?
body: <p>My teacher assigned me to make a snake game using javascript, html and css but i really don't get how to change the background on the game area. I'm a beginner so i know my code might be bad, sorry in advance.</p>
  
  <pre><code>       #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);
      }
  </code></pre>
  
  <p>I'd like the gameCanvas background to be a grid that actually fits the snake but as you might see from the code, at the very beginning, when you refresh the page, you can see some kind of grid but it gets updated to a blue background and it doesn't even fit the whole canvas.</p>