I am working with a canvas that I want to span 100% of the screen width and at least 100% of the screen height, with the ability to extend further if the next div exceeds the bottom of the screen.
To populate the canvas, I am 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>UPDATE
The main requirement is for the div immediately following the canvas to have the canvas as its background, spanning at least one full screen. If there is an alternative approach to achieve this, I am open to adapting my current method.