Tengo un elemento div
al cual le estoy dando tamaño mediante css
. Este elemento tiene un propiedad de posición relativa dada desde una hoja de estilos css
. Dentro de este div
existen 2 etiquetas canvas
, las cuales mediante javascript
deseo obtener el alto y el ancho de elemento padre (el div
antes mencionado), y ponerlos como atributos a estos 2 elementos canvas
const canvas = document.querySelector('.grid');
const widthContainer = canvas.parentNode.offsetWidth;
const heightContainer = canvas.parentNode.offsetHeight;
canvas.style.width = widthContainer+"px";
canvas.style.height = heightContainer+"px";
.containerTrack {
background-color: #FFF;
border-radius: 2px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0px 0px 5px rgb(100, 100, 100);
}
canvas {
border: 1px solid blue;
}
<div class="containerTrack">
<canvas class='grid'></canvas>
<canvas class="canvasCurves"></canvas>
</div>
El problema que está presentando, es que cuando obtengo el alto y el ancho del elemento padre, no es el que realmente se renderiza en la pantalla y por lo tanto los elementos canvas
quedan mas pequeños que su contenedor, alguien me puede explicar el ¿por qué?.
grid
esta tomando el tama;o que deberia tener mientas que el elementocanvasCurves
sigue con sus tama;o inicial...