将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. 可以使用其id将画布直接插入到<section>元素中：

 function setup() { var clientHeight = document.getElementById('about').clientHeight; var clientWidth = document.getElementById('about').clientWidth; var cnv = createCanvas(clientWidth, clientHeight); cnv.parent("about"); background(0); } 

2. 然后可以使用CSS和canvas关键字对canvas进行样式设置：

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