Despite my efforts, the canvas on my webpage is taking up the entire screen and preventing me from clicking on the navigation menu. I've tried various solutions like adding div tags and adjusting the z-index without success. Here's a snippet of the code I'm currently working with:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tvTheme.css">
</head>
<body>
<div style="position: absolute;">
<canvas style="position: absolute;">Your browser does not support canvas, or you are blocking JavaScript from running</canvas>
</div>
<h1 style="position: absolute; padding-left: 3%;"> P F N </h1>
<nav style="padding-top: 4%;">
<a href="shows.php" style="color: white;"> Home </a>
<a href="allShows.php"> TV Shows </a>
<a href="tvAbout.php"> About </a>
<a href="tvLegal.php"> Legal </a>
<a href="tvFAQ.html"> FAQ </a>
<a href=""> Bookmark </a>
</nav>
<div style='width: 100%;'>
<form id="search" action="search.php" method=POST style="width: 100%; text-align: center;"\>
<input type="text" name="term" placeholder="Search...">
</form>
</div>
<!-- JavaScript code for canvas animation -->
</body>
</html>
I need help ensuring that the canvas appears behind all other elements on the page but remains above the background. Any guidance or link to the site for reference would be greatly appreciated.