canvas 如何使用 window 调整大小？

Question

我刚刚开始学习 web 开发，我坚持一个问题。

我尝试使用一个 canvas 作为 header 站点。 我正在尝试使用这个：

https://codepen.io/towc/pen/mJzOWJ

But unfortunately, even if the canvas is in a div, when i resize my window the canvas don't work propely and the canvas become taller than before.

我已经尝试将 canvas 放在适当的 div 中，并初始化 height=100% 和 width=100%

HEADER

这是我的 header 的代码

<header class="masthead">
      <canvas id="c" height="100%" width="100%"></canvas>
    <div class="overlay"></div>

    <div class="container">

      <div class="row"> 

        <div class="col-lg-8 col-md-10 mx-auto">

          <div class="site-heading">

            <h1>My website</h1>
            <span class="subheading">Etudiant ingénieur <br> Artificial Intelligence</span>
          </div>
        </div>
      </div>
    </div>
  </header>

CSS零件

header.masthead {

  margin-bottom: 30px;
  background: no-repeat center center;
  background-color: #868e96;
  background-attachment: scroll;
  position: relative;
  background-size: cover;

}

header.masthead .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #212529;
  opacity: 0.5;
}

header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
  padding: 100px 0 50px;
  color: white;
}

@media only screen and (min-width: 768px) {
  header.masthead .page-heading,
  header.masthead .post-heading,
  header.masthead .site-heading {
    padding: 50px 0;
  }
}

header.masthead .page-heading,
header.masthead .site-heading {
  text-align: center;
}

因此，当我调整 window 的大小时，我想调整 canvas 的大小并保持横幅的大小。

感谢您的建议，我很确定这很容易管理。

Answer 1

我终于修好了。

我在用 javascript 编写的脚本上做了这个

var canvas = document.querySelector('c');
fitToContainer(canvas);

function fitToContainer(canvas){

  c.style.width ='100%';
  c.style.height='100%';
  c.width  = c.offsetWidth;
  c.height = c.offsetHeight;
}