title: HTML Canvas does not scroll down
body: <p>I need this with this. I created a JavaScript animation and used it as the background for my website, but when I add sections, and div, below past the screen width, it puts it below but I CANNOT SCROLL TO THEM. Please can someone help with this? Thank you. I will paste in the HTML and JavaScript.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Canvas - Chris Courses&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Poppins|Roboto" rel="stylesheet"&gt;
  
  &lt;/head&gt;
  &lt;body onload="canvasBg()"&gt;
      &lt;canvas&gt;&lt;/canvas&gt;
  
      &lt;section id="body section"&gt;
          &lt;div id="top-info"&gt;
              &lt;div class="container"&gt;
                  &lt;h1&gt;Hello!, my name is Anjolaoluwa.&lt;/h1&gt;
                  &lt;h2&gt;But call me &lt;span&gt;AJ.&lt;/span&gt;&lt;/h2&gt;
                  &lt;h4&gt;specializing in Web Design, Web Development, and Mobile Development.&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="about-section"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="well"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-8"&gt;
                              &lt;h3&gt;Who is Behind All This&lt;/h3&gt;
                              &lt;h5&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet egestas dolor, a convallis turpis.&lt;/h5&gt;
                          &lt;/div&gt;
                          &lt;div class="col-lg-4"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
  
  
  
  
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/canvas.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  and the JavaScript is:
  
  function canvasBg(){
      let canvas = document.querySelector('canvas');
  
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
  
      let c = canvas.getContext('2d');
  
  
      /* ANIMATING THE CANVAS */
      let mouse = {
          x: undefined,
          y: undefined
      }
  
      let maxRadius = 40;
      let minRadius = 2;
  
      let colorArray = [
          '#F1A9A0',
          '#663399',
          '#9B59B6',
          '#87D37C',
          '#F89406',
          '#AEA8D3',
          '#3498DB',
          '#FF5733',
          '#581845',
          '#900C3F',
          '#1ABC9C'
      ];
  
      window.addEventListener('mousemove', (e) =&gt; {
          mouse.x = e.x;
          mouse.y = e.y;
      });
  
      window.addEventListener('resize', () =&gt; {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
  
          init();
      });
  
      let two_pi = Math.PI * 2;
  
      function Circle(x, y, dx, dy, radius){
          this.x = x;
          this.y = y;
          this.dx = dx;
          this.dy = dy;
          this.radius = radius;
          this.minRadius = radius;
          this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
  
          this.draw = () =&gt; {
              c.beginPath();
              c.arc(this.x, this.y, this.radius, 0, two_pi, false);
              c.fillStyle = this.color;
  
              c.fill();
          }
  
          this.update = () =&gt; {
              if(this.x + this.radius &gt; innerWidth || this.x - this.radius &lt; 0){
                  this.dx = -this.dx;
              }
  
              if(this.y + this.radius &gt; innerHeight || this.y - this.radius &lt; 0){
                  this.dy = -this.dy;
              }
  
              this.x += this.dx;
              this.y += this.dy;
  
              // Interactivity occurs here
              if(mouse.x - this.x &lt; 50 &amp;&amp; 
                  mouse.x - this.x &gt; -50 &amp;&amp; 
                  mouse.y - this.y &lt; 50 &amp;&amp; 
                  mouse.y - this.y &gt; -50) {
                  //code
                  if(this.radius &lt; maxRadius){
                      this.radius += 1;
                  }
              } else if(this.radius &gt; this.minRadius){
                  this.radius -= 1;
              }
  
              this.draw();
          }
      }
  
  
  
  
  
      var circleArray = [];
  
      function init(){
          circleArray = [];
  
          for(let i = 0; i &lt; 1600; i++){
              let radius = Math.random() * 3 + 1;
              let x = Math.random() * (innerWidth - radius * 2) + radius;
              let y = Math.random() * (innerHeight - radius * 2) + radius;
              let dx = (Math.random() - 0.5);
              let dy = (Math.random() - 0.5);
  
  
              circleArray.push(new Circle(x, y, dx, dy, radius));
              var circle = new Circle(200,200, 3, 3, 30);
          }
      }
  
      function animate(){
          requestAnimationFrame(animate);
  
          c.clearRect(0, 0, innerWidth, innerHeight);
  
          for(let i = 0; i &lt; circleArray.length; i++){
              circleArray[i].update();
          }
      }
  
      animate();`
  }
  </code></pre>