Неполадки при чтении ширины и высоты элемента div с использованием clientWidth и offsetWidth

Question

Я хочу изменить размер элемента canvas динамически. Моя страница разделена на две части, где левая сторона имеет некоторые настройки, а правая сторона имеет элемент canvas. Поскольку страница может быть изменена, элемент canvas должен быть изменен вместе с ним. До сих пор я пытаюсь добиться этого с помощью сетки CSS и Eventlistener, который изменяет размер элемента canvas каждый раз, когда изменяется размер окна.

Теперь к актуальной проблеме: когда я устанавливаю ширину и высоту холста равными ширине и высоте CanvasContainer (в функции, выполняемой Eventlistener), div CanvasContainer не изменяет размер правильно. Фактически, когда я уменьшаю ширину окна, ширина div увеличивается. Если я оставлю эти две строки, div CanvasContainer изменяет размер, как и ожидалось.

HTML:

<div class="Container">
    <div class="Control">
        <input id="StateCodeText" type="text" placeholder="State code">
        <br>
        <input id="StateOutputText" type="text" placeholder="State output">
        <br>
       <button id="NewStateButton">New state</button> 
    </div>

    <div class="CanvasContainer">
        <canvas></canvas>
    </div>   
</div>

Javascript:

let CanvasContainer = document.querySelector(".CanvasContainer");
Resize();

window.addEventListener("resize", Resize);

function Resize() {
   canvas.width = CanvasContainer.clientWidth;
   canvas.height = CanvasContainer.clientHeight; 
}

CSS:

.Container {
    display: grid;
    grid-template-columns: 1fr 8fr;
    height: 100%;
}

.CanvasContainer {
    border: 2px solid rgb(255, 0, 13);
    width: 100%;
    height: 100%;
}

Answer 1

Вы обязательно определили canvas в своем js? Может быть, дать ему идентификатор

<canvas id=canvas'></canvas>, а затем определить

const canvas = document.getElementById('canvas')

Но, возможно, этот подход не лучший в любом случае. Сетка css сама изменит размеры всех элементов. До сих пор, похоже, нет необходимости в контейнере Canvas. Так как же вместо этого

<div class="Container">
   <div class="Control">
      ...   
   </div>
   <canvas id='canvas'></canvas>
</div>

и некоторые css

.Container {
    display: grid;
    grid-template-columns: 1fr 8fr;
    height: 100%;
}

#canvas {
    border: 2px solid rgb(255, 0, 13);
    width: 100%;
    height: 100%;
}

Если вам нужен текущий размер холста в какой-то момент, вы всегда можете получить к нему доступ

const width = document.getElementById('canvas').getBoundingClientRect().width