Javascript 画布如何随窗口调整大小？

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

我尝试使用一个画布作为标题站点。我试着用这个：

但不幸的是，即使画布位于div中，当我调整窗口大小时，画布也无法正常工作，画布变得比以前更高

我已经尝试将画布放置在适当的div中，并初始化高度=100%和宽度=100%

标题 这是我的标题代码

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

所以我想调整画布的大小，当我调整窗口的大小并达到横幅的大小时，我之前向您展示了画布的大小

谢谢你的建议，我确信这很容易管理。

我终于修好了

我是在用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;
}

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