HTML, css, javascript. canvas pushing other divs away

Question

I'm trying to create a canvas on top of some text, how do I make it so that the canvas doesn't push away the text?

In my code I would like to make something fly from one side to the other in random size and place. I want the text in the middle but every time I add the canvas it pushes the text down to create space.

Here is the code:

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 40) {
      $(".woord").css({
        "opacity": "0"
      })
    } else {
      $(".woord").css({
        "opacity": "1"
      })
    }
  })
})

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: white;
  background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #33D7FF);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 20px;
  overflow: auto;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/*witte div*/

#div1 {
  width: 100%;
  height: 1000px;
  margin-left: -10px;
  margin-right: 220px;
  padding: 50px, 50px, 50px, 50px;
  background-color: white;
  border-radius: 100px 100px 0px 0px;
}

#div1 h1 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

#div1 p {
  color: black;
  font-family: lucida console, monospace;
  font-size: 50px;
  text-align: center;
}

h1 {
  color: black;
  font-family: lucida console, monospace;
  font-size: 150px;
  text-align: center;
  margin-top: 300px;
}

.woord {
  transition: 0.5s;
  border: 0px;
  height: 550px;
  margin-left: -10px;
  margin-bottom: -22px;
}

li {
  font-size: 30px;
  font-family: lucida console, monospace;
  display: inline;
  text-align: center;
}

a {
  transition: ease-in-out .2s;
}

a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  border: 1px solid;
  zoom: 1.1;
}

.nav {
  border: 1px solid;
  border-width: 1px;
  height: 64px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  box-sizing: border-box;
  width: 1000px;
  margin-left: 220px;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woord">

  <h1>website</h1>
  <canvas id="canvas" width="200" height="100"></canvas>
</div>
<div id="div1">
  <h1>main</h1>
  <ul class="nav">
    <li><a href="biografie">Biografie</a></li>
    <li><a href="fotos">fotos</a></li>
    <li><a href="heuristiek">heuristiek</a></li>
    <li><a href="buienradar">buienradar</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
  <p>hoi</p>
  <p>dit is mijn website <br /> over mijzelf </p>.
</div>

Answer 1

A possible solution is using position absolute, on the canvas itself.

canvas {
  position: absolute;
}