Grow Canvas to fit following div

Question

I have a canvas which I want to be 100% screen width and at least 100% screen height, but more if the following div goes beyond the bottom of the screen.

I am filling the canvas using Trianglify.

    var pattern = Trianglify({
      cell_size: 25,
      x_colors: 'Greens'
    });
    pattern.canvas(document.getElementById('container1'));
    setInterval(function() {
      // method to be executed;
      var pattern = Trianglify({
        cell_size: 25,
        x_colors: 'Greens'
      });
      pattern.canvas(document.getElementById('container1'));
    }, 1000);

canvas#container1 {
  position: absolute;
  width: 100vw;
  min-height: 100vh;
}
.screen-container {
  min-height: 100vh;
  position: relative
}
.trianglify-container {
  background-color: transparent;
  color: #fff;
  text-align: center;
  padding-top: 20vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
  <div class="container">
    ...
  </div>
</div>

EDIT

The important thing for me is that the div immediately following the canvas needs to have the canvas covering all of it's background and cover at least 1 screen. It there is a different way to achieve this I'm happy to adapt my approach.

Answer 1

Is this result what you want?

-- Long content --

var pattern = Trianglify({
      cell_size: 25,
      x_colors: 'Greens'
    });
    pattern.canvas(document.getElementById('container1'));
    setInterval(function() {
      // method to be executed;
      var pattern = Trianglify({
        cell_size: 25,
        x_colors: 'Greens'
      });
      pattern.canvas(document.getElementById('container1'));
    }, 1000);

.outer-wrapper{
  min-height: 100vh;
  position: relative;
}
canvas#container1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.screen-container {
  /*min-height: 100vh;*/
  position: relative;
}
.trianglify-container {
  background-color: transparent;
  color: #fff;
  text-align: center;
  /*padding-top: 20vh;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
  <canvas id="container1"></canvas>
  <div class="screen-container trianglify-container">
    <div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper lacinia semper. Pellentesque dignissim tempus nisi sit amet porttitor. Sed laoreet, nisi eu auctor cursus, tellus turpis porta diam, ac fermentum enim odio auctor dolor. Duis in nunc rhoncus, vestibulum est at, fermentum ligula. Suspendisse dui dui, luctus id lacus eu, tempor venenatis sem. Ut pellentesque sodales turpis quis efficitur. Donec vulputate placerat orci, vitae porttitor nunc. Etiam risus nibh, porta porta libero in, tempor auctor dolor. Quisque id augue at dui egestas vulputate.

Praesent tristique eu urna non faucibus. Nunc leo urna, euismod in neque vitae, elementum consequat libero. Integer in dignissim nunc, id scelerisque metus. Etiam ut ipsum iaculis, ullamcorper eros nec, elementum odio. Donec ornare lorem a semper porttitor. Suspendisse tincidunt mauris nec dui rhoncus, in semper augue blandit. Integer laoreet, velit sed molestie malesuada, enim quam mollis sapien, ullamcorper sollicitudin mi mi non urna. Mauris eu dignissim lectus.

Aliquam lacus tortor, dictum quis pulvinar volutpat, tincidunt id leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fermentum aliquam neque vitae bibendum. Nulla volutpat luctus urna et faucibus. Fusce convallis nulla tortor, vel ornare ante scelerisque in. Vivamus justo odio, porta nec vulputate ut, volutpat quis ipsum. Praesent id volutpat justo, sit amet euismod dui. In eget erat massa. Aliquam ultrices egestas ipsum, ac tincidunt diam gravida ac. Nullam tortor dui, viverra scelerisque vehicula varius, luctus in ipsum. Nulla dolor est, mattis in pellentesque at, interdum ac nibh.

Ut bibendum tellus varius orci aliquet luctus. Duis tortor nisl, suscipit at ornare ut, scelerisque nec dolor. Ut efficitur facilisis nulla a rutrum. Donec ut sodales odio, sed venenatis leo. Ut scelerisque eros in gravida fringilla. Aliquam fringilla vitae orci sed tincidunt. Aenean efficitur nibh elit, id sollicitudin enim mattis ut.

Praesent hendrerit ex eget quam ultrices, eget iaculis nunc pellentesque. In in orci interdum sapien bibendum sagittis. Mauris at massa quis nisi commodo facilisis at vel ligula. Vestibulum vitae aliquet lorem, vel faucibus lacus. Integer tortor nulla, rutrum dictum elit a, iaculis scelerisque nulla. Suspendisse massa eros, cursus quis enim a, volutpat aliquam quam. Fusce tristique tortor id laoreet blandit. Donec laoreet enim felis, consequat faucibus ante auctor vitae. Duis sollicitudin euismod dolor, in accumsan ipsum. Mauris tempus ligula nec nisl ornare dictum. Quisque luctus dolor magna. Maecenas et neque eu mi pellentesque maximus eu sit amet purus. Fusce eu porta tellus. 
    </div>
  </div>
</div>

-- Same code, this time with a shorter content --

var pattern = Trianglify({
      cell_size: 25,
      x_colors: 'Greens'
    });
    pattern.canvas(document.getElementById('container1'));
    setInterval(function() {
      // method to be executed;
      var pattern = Trianglify({
        cell_size: 25,
        x_colors: 'Greens'
      });
      pattern.canvas(document.getElementById('container1'));
    }, 1000);

I just wraped them both inside a wrapper div that has `min-height: 100%`. The wrapper div will expand with the content if it get longers, while the canvas always fill the wrapper div.
.outer-wrapper{
  min-height: 100vh;
  position: relative;
}
canvas#container1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.screen-container {
  /*min-height: 100vh;*/
  position: relative;
}
.trianglify-container {
  background-color: transparent;
  color: #fff;
  text-align: center;
  /*padding-top: 20vh;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
  <canvas id="container1"></canvas>
  <div class="screen-container trianglify-container">
    <div class="container">
Short content
    </div>
  </div>
</div>

Answer 2

https://jsfiddle.net/hbe5j4m9/4/

Like this? I Updated the .screen-container to contain the height of the canvas

.screen-container {
min-height: 100%;
position: relative
}