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;
}