I want a canvas to fit its parent so I created a simple script:

<script>
    $(document).ready(() => {
        const canvas = document.getElementById('main-canvas');

        canvas.width = $('#canvas-container').width();
        canvas.height = $('#canvas-container').height();
        canvas.style.width = $('#canvas-container').width();
        canvas.style.height = $('#canvas-container').height();

        $(window).resize(() => {
            canvas.width = $('#canvas-container').width();
            canvas.height = $('#canvas-container').height();
            canvas.style.width = $('#canvas-container').width();
            canvas.style.height = $('#canvas-container').height();
        });
    });
</script>

The problem is that when I resize my browser window (Chrome), the height is not set correctly but constantly increasing. The more I resize the window the higher the canvas gets. Why is this happening? It also happens when I use offsetWidth and offsetHeight or the canvas instead of the container both with size functions or offset-size.