alongamento div contendo tela

Question

Olá, estou tentando fazer isso:

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

Criei javascript para renderizar canvas, alguém poderia aconselhar como esticar div de acordo com o tamanho da tela e se é possível sem javascript?Já tentei soluções para divs aninhadas, mas não funcionou.Obrigado

Answer 1

Use um diferente display para o contendo div então as coisas devem funcionar (veja também 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 */
}

PS.O line-height: 0 existe para garantir que não apareça o espaço é renderizado abaixo da tela.Veja também essa questão.

Answer 2

se você puder determinar quando o tamanho da tela será alterado, acione um evento que definirá as dimensões do div dinamicamente de acordo com as dimensões alteradas da tela