estiramiento div que contiene lienzo

Question

Hola estoy intentando tener esto:

<div>
<canvas height="300px" width="200px"></canvas>
</div>

Creé javascript para representar el lienzo, ¿alguien podría aconsejarme cómo estirar div según el tamaño del lienzo y si es posible sin javascript?Ya probé soluciones para divs anidados, pero no funcionó.Gracias

Answer 1

Usa un diferente display para el que contiene div entonces las cosas deberían funcionar (ver también este jsfiddle):

<div>
    <canvas height="300px" width="200px"></canvas>
</div>

CSS:

div {
    border: 2px solid blue; /* demo purposes */
    display: inline-block;
    line-height: 0;
}
canvas {
    background-color: khaki; /* demo purposes */
}

PD.El line-height: 0 está ahí para asegurarse de que no aparezca el espacio se renderiza debajo del lienzo.Ver también esta pregunta.

Answer 2

Si puede determinar cuándo se cambia su tamaño de lona, active un evento que establecerá las dimensiones del DIV dinámicamente como de acuerdo con las dimensiones modificadas del lienzo