So I have everything working perfectly and it looks nice, except that the canvas just takes up the entire screen and I cannot click on anything in the nav menu. I tried adding div tags around different things and changing the z-index but it doesnt change anything. Here is what I have:
<!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>
<script>
//#dda56e
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext('2d');
var tau = 2 * Math.PI;
function Triangle(canvs, cnt, sid, f) {
this.phase = 0;
this.ctx = canvs.getContext('2d');
this.first = f;
this.sides = sid;
this.canv = canvs;
this.draw = drawTriangle;
this.size = screen.width/12;
this.red = 221;
this.green = 163;
this.blue = 107;
}
function drawTriangle() {
requestAnimationFrame(drawTriangle.bind(this));
var x = 0;
var y = 0;
var centerX = this.canv.width/10;
var centerY = this.canv.height/7;
this.phase += 0.005 * tau;
if(this.first == 1) {
this.ctx.clearRect(0, 0, this.canv.width, this.canv.height);
}
this.ctx.beginPath();
for (var i = 0; i <= this.sides; i++) {
this.ctx[i ? 'lineTo' : 'moveTo'](
centerX + this.size * Math.cos(this.phase + i / this.sides * tau),
centerY + this.size * Math.sin(this.phase + i / this.sides * tau)
);
}
this.ctx.strokeStyle = "rgba("+this.red+","+this.green+","+this.blue+",0.3)";
this.red++;
this.green-=.5;
this.blue--;
this.ctx.stroke();
this.size--;
if(this.size < 1) {
this.size = 0;
}
}
var collection = [];
var triangle1 = new Triangle(canvas,context,3,1);
triangle1.draw();
var i = 0;
function nextFrame() {
if(i < 100000) {
collection[i] = new Triangle(canvas,context,3,0);
collection[i].draw();
i++;
setTimeout(nextFrame, 100);
}
}
setTimeout(nextFrame, 0);
</script>
</body>
</html>
How can I make the canvas be behind all the elements on the page, but above the bodies background? I know that is really crappy worded so if you need a link to the site let me know.
