Estoy siguiendo esta guía para crear agregar y eliminar elementos de cuadrícula. Sin embargo, ¿es posible evitar que se cree más allá de un tamaño de lienzo fijo?

por ejemplo, la altura de mi lienzo es de 300 px, por lo que cuando hago clic en el botón Agregar elemento , no se creará ningún elemento.

Esta es mi función actual que verifica la altura deseada

 warningMessage = () => { var chart = document.getElementsByClassName("graph"); var largestYvalue = ""; for (var i = 0; i < chart.length - 1; i++) { var firstElement = parseInt( chart[i].style.transform.replace(/[\(\)]/g, "").split(",")[1] ); var EachElement = parseInt( chart[i + 1].style.transform.replace(/[\(\)]/g, "").split(",")[1] ); if (EachElement > firstElement) { largestYvalue = EachElement; } } if (largestYvalue >= 300) { alert("it is going beyond the canvas"); } };

El lienzo se define en mi styles.css

 .DetailLocationContainer { background-color: red; width: 100px; height: 300px; /* margin: 2% auto auto auto; */ background-image: repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%), repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%); background-size: 50px 50px; }

El elemento de cuadrícula se creará después de la alerta, pero lo que intento hacer es tener la alerta sin crear el elemento de cuadrícula.

Esta es mi caja de códigos