Как рассчитать `innerHeight`, включая высоту вертикально выровненных элементов?

Question

Моя цель - вычислить происхождение представления холста в окне браузера html путем вычисления innerWidth и innerHeight. Мой код успешно вычисляет view.originX, и я пытаюсь вычислить view.originY. Для этого мне нужно включить высоту трех вертикально выровненных элементов h4, h6 и button, как показано ниже .

    <div class="text-center">
    <h4 id="title">TITLE</h4>
    <h6 id="code1">abc</h6>
    </div>

    <div id="container" class="text-center">
    <button id="more" onclick="select()">
    <p><span>more</span></p>
    </button>
    </div>    

    <div id="container" class="text-center">
    <canvas id="truss" width=640 height=420>
    </canvas>
    </div>

Я нашел два SO вопроса о расчет innerWidth и innerHeight. first включает прокрутку, которая мне не нужна. секунда вычисляет размер документа html, когда отображается адресная строка. A третий имеет дело с неизвестной высотой. Мой код неполон, потому что он не вычисляет высоту трех html элементов над холстом.

    <script>

    initView();

    function initView(){
    view = document.getElementById('canvas');
    ctx1 = view.getContext('2d');
    var frame = initWindow();
    view.midX = view.width * 0.5;
    view.midY = view.height * 0.5;
    view.originX = frame.midX - view.midX;
    view.originY = frame.midY - view.midY;
    document.getElementById("title").firstChild.data = "initView : "
                                        + frame.w +             ", "
                                        + view.originX +        ", "
                                        + frame.h +             ", "
                                        + view.originY;
    ctx1.translate(view.midX, view.midY);
    }

    function initWindow(){
    var frame = {
        w: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        h: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
    }
    frame.midX = frame.w * 0.5;
    frame.midY = frame.h * 0.5;
    return frame;
    }

    </script>

Я использую Bootstrap 4, где h4 и h6 равны 24 и 16 пикселей соответственно. button высота 24 пикселя. Чтобы еще больше усложнить ситуацию, каждый элемент расположен вертикально на неизвестном уровне.

В JavaScript как рассчитать innerHeight, чтобы он включал высоту вертикально выровненных элементов?