将P5草图放置为截面背景

Question

我正在配置一个Bootstrap模板，并尝试将P5.js草图设置为网站某个部分的背景。

我已尝试在该部分内创建一个div，然后将div的CSS设置为position: absolute !important;但是，这仍然取代其他所有内容并且不会填充部分区域。

将草图插入到剖面中的最强大的解决方案是什么，以便将其完全填充为背景而不会干扰任何其他组件？

<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
    <div id="container"></div>
    <div class="my-auto">
        <h1 class="mb-0">Charles
                <span class="text-primary">Fried</span>
              </h1>
        <div class="subheading mb-5">Give a description
            <a href="mailto:name@email.com">name@email.com</a>
        </div>
        <p class="mb-5">Blahhhhhhh</p>
        <ul class="list-inline list-social-icons mb-0">
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
        </ul>
    </div>
</section>

P5草图：

function setup() {

    var clientHeight = document.getElementById('about').clientHeight;
    var clientWidth = document.getElementById('about').clientWidth;

    var cnv = createCanvas(clientHeight, clientWidth);
    cnv.parent("container");
    background(0);
}

编辑：我已经将JSfiddle放在一起，希望有人可以帮我解决这个问题。为清楚起见，画布应填充黄色区域（部分）而不移动其中的任何项目。

Answer 1

好的，在玩完之后，似乎解决方案非常简单。

1. 可以使用<section>
将画布直接插入id元素中

function setup() {

	var clientHeight = document.getElementById('about').clientHeight;
	var clientWidth = document.getElementById('about').clientWidth;

	var cnv = createCanvas(clientWidth, clientHeight);
	cnv.parent("about");
	background(0);
}

1. 然后可以使用带有canvas关键字的CSS来设置画布样式：

canvas {
  position: relative;
  z-index: -3 !important;
}