I want to hide the contents of id="root" when the page does not have the canvas element. And I want to show the contents of id="root" when the page has the canvas element. Here is my script:-

<script>
  document.getElementById("root").style.display = "none";
  console.log("root = " + document.getElementById("root"));
  let canvas = document.getElementsByTagName("canvas")[0];
  console.log("canvas = " + canvas);
  let containsCanvas = document.getElementById("root").contains(canvas);

  let inter = setInterval( function() {
    containsCanvas = document.getElementById("root").contains(canvas);
    console.log("contains Canvas = " + containsCanvas);
    if (containsCanvas) {
      document.getElementById("root").style.display = "block";
      clearInterval(inter);
    }
  }, 100)
</script>

But this code is not working. I have written this script in the index.html of a react project. The console.log("contains Canvas = " + containsCanvas); always shows false.

When I inspect, I see that the canvas element is present. But console.log("canvas = " + canvas); is showing undefined.

Can anyone help me?