Quiero un lienzo que se ajuste a su padre, así que creé un script simple:

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

El problema es que cuando cambio el tamaño de la ventana de mi navegador (Chrome), la altura no se configura correctamente sino que aumenta constantemente. Cuanto más cambio el tamaño de la ventana, más alto se pone el lienzo. ¿Por qué está pasando esto? También sucede cuando uso offsetWidth y offsetHeight o el lienzo en lugar del contenedor con funciones de tamaño o tamaño de desplazamiento.