How can I implement this animation background into my website?

#1

Hi I’m trying to implement the codepen linked below into my intro-section background. What am i doing that’s wrong? Here is my attempt below.

Possible reason why the background is not showing on the intro-section

Due to the canvas use I thought I should place it at the bottom ofintro-sectionto ensure the text goes over the background. As a result of this, I have put my html below.

<!-- Intro Section -->
  <section id="intro" class="intro-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <p class="main1">Welcome To My Digital Portfolio</p>
          <p class="main2">My name is Liam Docherty</p>
          <p class="main3">I'm a front end web developer from London.</p>
        </div>
      </div>
    </div>
    <canvas id="canvas"></canvas>
  </section>

JSFIDDLE - My attempt

JSFIDDLE link I’m trying to implement into my intro-section background

#2

haven’t looked at your code in detail but for starters, the code you are trying to implement is referring to an external js file - //cdnjs.cloudflare.com/ajax/libs/ocanvas/2.8.1/ocanvas.min.js
where as your JSFIDDLE is not referring to that file, so maybe start from there and see where it takes you

#3