2

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é?.

2
  • no entiendo a que te refieres? ya que el elemento grid esta tomando el tama;o que deberia tener mientas que el elemento canvasCurves sigue con sus tama;o inicial...
    – Bryro
    Commented el 12 feb. 2020 a las 15:18
  • disculpa por la confusion generada por el codigo, la cuention es que tanto al elemento canvas con la clase grid y el elemento con la clase canvasCurves son elementos con posicionamiento absoluto, y el elemento containerTrack es relativo, esto lo hago para que los canvas queden superpuestos uno encima del otro dentro del mismo contenedor, pero necesitaba que el tamaño (width y heigth) de estos elementos (canvas), fuese el mismo que el de su contenedor, y al hacerlo con javascript el tamaño que tomaban estos elementos no eran el correcto, pero ya se resolvio el problema Commented el 12 feb. 2020 a las 17:34

1 respuesta 1

2

Si quieres que un elemento sea del mismo tamaño que el padre, basta con decirle que quieres que sea el 100% del mismo. El problema que estabas teniendo es que si le dices a un elemento que sea de un tamaño X, el padre se tendrá que estirar para meter ese elemento y al resto de elementos hijos, lo que provocará un re-cálculo de los tamaños.

.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;
  width: 100%;
  height: 100%;
}
<div class="containerTrack">
  <canvas class='grid'></canvas>
</div>

3
  • no creo que sea el caso porque los elementos canvas posee una posicion absoluta, y necesito hacer esto es porque para poder dibujar en un elemento canvas tienes que tener tanto el atributo width con el estilo width deifinido de la misma forma al igual que el height porque de lo contrario se pixela el dibujo, me acabas de dar una idea de con lo que me dijiste, la probare a ver si funciona... Commented el 12 feb. 2020 a las 15:35
  • Hazlo al revés: define width en función del tamaño actual del canvas Commented el 12 feb. 2020 a las 15:45
  • gracias amigo esa fue la idea que me surgio cuando me respondio, y me ha servido muchas gracias Commented el 12 feb. 2020 a las 17:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.