error: Uncaught TypeError: Cannot read property 'getContext' of null

Question

when i write:

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //var canvas = document.getElementById("canvas") //var ctx = canvas.getContext("2d") //var c = document.getElementById("canvas") //var ctx = c.getCont#indevtext { //ext("") $("#start").click(function(){ start() }) function start() { $(document).ready(function(){ $("#start").click(function(){ $("canvas").show() $("#start").hide() }) }) } sg() start() function sg() { //ctx.clearRect(0, 0, canvas.width, canvas.height) //ctx.BeginPath() //ctx.arc(x, y, radius, 0, Math.PI*2); //ctx.fillStyle = "brown"; //ctx.fill() } function frame() { //ctx.clearRect(0, 0, canvas.width, canvas.height) } window.onload = function() { //canvas = document.getElementById("canvas") canvas.getContext("2d") }

 #indevtext { color: darkgreen; text-align: center; padding: 250px 0; }.container { height: 200px; text-align: center; margin: 250px 0; position: relative; border: 3px solid green; }.sd { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #start { text-align: center; margin: 250px 0; color: limegreen; } #game { border: black 1px solid; background-color: #178735; display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <head> <body> <div> <div> <div> <canvas id="game" width="550px" height="587px"></canvas> <h1 id="start">Enter Game</h1> </div> </div> </div> </body> </head>

i get a error:

error: Uncaught TypeError: Cannot read property 'getContext' of null

i check my code 5times, tried to find what to do, and check posts. please, help me. im want to make a game to play with my friends (:

and you can help me to find how to make a map. if you want to help for the game tell me (:

Answer 1

you are referring to the wrong id :

<canvas id="game" width="550px" height="587px"></canvas>
...         ^^^^
var canvas = document.getElementById('canvas');
                                     ^^^^^^^^

it should be:

var canvas = document.getElementById('game');

error: Uncaught TypeError: Cannot read property 'getContext' of null

Question

1 answers

solution1
0 2020-07-25 01:04:25

error: Uncaught TypeError: Cannot read property 'getContext' of null

Question

1 answers

solution1 0 2020-07-25 01:04:25

solution1
0 2020-07-25 01:04:25