javascripthtmlcanvas

I am getting an error from the javascript code: var context = document.getElementById("gameCanvas").getContext("2d");

I am working on developing a game. However, I cannot seem to get the context of the canvas as I have before. My HTML file contains the code:

<html>
<head>
  <meta charset="utf-8">
  <title>Nostalgia</title>
  <link rel="stylesheet" href="gameStyles.css"></link>
</head>
<body>
  <canavs id="gameCanvas"></canvas>
</body>
<script src="gameScript.js"></script>
</html>

The javascript file is:

context = document.getElementById("gameCanvas").getContext("2d");

const level = [0,0,0,0,0];
var xToDraw = 0;
var yToDraw = 0;


var img0 = new Image();
img0.src = "./images/tiles/grass.png";

var img1 = new Image();
img1.src = "./images/tiles/dirt.png";

var img2 = new Image();
img2.src = "./images/tiles/sand.png";
function drawLevel(){
  // solution
  level.map((item1) => {
    yToDraw-=16
    item1.map((item2) => {
      if(item2==0){
        context.drawImage(img0, xToDraw, yToDraw);
      }
      xToDraw+=16;
    });
  });
}
  drawLevel();

Note: This is being run using electron, the page is loading to the window.

The error that was being thrown was: TypeError: document.getElementById(...).getContext is not a function

I would appreciate any help in resolving this error.

Solution

  • This is because you have misspelt your canvas tag:

    <canavs id="gameCanvas"></canvas>

    Should be:

    <canvas id="gameCanvas"></canvas>