canvas id not being recongized in javascript

Question

I am trying to find why my html canvas element is not being recognized in javascript.

I'm not sure why my canvas element is null. I defined it in html, and only run javascript once the DOMContentLoaded event is fired.

index.html:

<!DOCTYPE html>
<html>
   <head>
      <title>Whiteboard</title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
      <canvas id="canvas">Your browser doesn't support "canvas".</canvas>
      <!--<script src="/node_modules/socket.io/socket.io.js"></script>-->
      <script type="text/javascript" src="client1.js"></script>
   </body>
</html>

client1.js:

 document.addEventListener("DOMContentLoaded", function() {
       var mouse = { 
          click: false,
          move: false,
          pos: {x:0, y:0},
          pos_prev: false
       };
       // get canvas element and create context
       document.write("Hetoo   ");
       var canvas  = document.getElementById("canvas");
       if(canvas)
       {
           document.write("got her.");
       }
       else
       {
           document.write(canvas);
       }
       document.write("  Hepoo  ");
       var context = canvas.getContext('2d');
       document.write("Heyoo  ");
 }

output on webpage:

Hetoo null Hepoo

I am expecting the canvas to not be null, but the javascript does not recognize this for some reason.

Possible duplicate of [Code inside DOMContentLoaded event not working](https://stackoverflow.com/questions/39993676/code-inside-domcontentloaded-event-not-working) — helloitsjoe, Jun 09 '19 at 18:31
@helloitsjoe I believe that question is not relevant as it's talking about `babel` specific behavior, which is not the case here. Plus, the event handler is firing. The issue is that the content is not available during the function, not that the function does not fire. — Tibrogargan, Jun 09 '19 at 18:42
Possible duplicate of [JavaScript Document.Write Replaces All Body Content When Using AJAX](https://stackoverflow.com/questions/2360076/javascript-document-write-replaces-all-body-content-when-using-ajax) — Tibrogargan, Jun 09 '19 at 18:46

score 1 · Answer 1 · answered Jun 09 '19 at 18:33

For an explanation of why this is happening, see this: JavaScript Document.Write Replaces All Body Content

Quick fix: Replace the document.write calls in client1.js with console.log

document.addEventListener("DOMContentLoaded", function() {
   var mouse = {
      click: false,
      move: false,
      pos: {x:0, y:0},
      pos_prev: false
   };
   // get canvas element and create context
   var mouse = {
      click: false,
      move: false,
      pos: {x:0, y:0},
      pos_prev: false
   };
   // get canvas element and create context
   console.log("Hetoo   ");
   var canvas  = document.getElementById("canvas");
   if(canvas)
   {
       console.log("got her.");
   }
   else
   {
       console.log(canvas);
   }
   console.log("  Hepoo  ");
   var context = canvas.getContext('2d');
   console.log("Heyoo  ");
})

You should also consider moving your script tag into the head element and use async or defer attributes to control how they are loaded, if necessary

score 0 · Answer 2 · answered Jun 09 '19 at 19:11

0

I'm getting the context object try the bellow code and let me know

var canvas = document.getElementById("canvas");
        console.dir(canvas.getContext('2d'));

<canvas id="canvas">Your browser doesn't support "canvas".</canvas>

answered Jun 09 '19 at 19:11

Raghul Selvam

314
2
6

score -1 · Answer 3 · answered Jun 09 '19 at 18:32

-1

It should work if you remove the DOMContentLoaded listener, see this answer:

Code inside DOMContentLoaded event not working

answered Jun 09 '19 at 18:32

helloitsjoe

6,264
3
19
32

canvas id not being recongized in javascript

3 Answers3