div stretching containing canvas

Question

Hi i am trying to have this:

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

I created javascript to render canvas, could someone advice how to stretch div according canvas size and if it is possible without javascript?? I already tried solutions for nested divs, but it didn't work. Thanks

Answer 1

Use a different display for the containing div then things should work (see also this 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. The line-height: 0 is there to make sure there appears no space is rendered below the canvas. See also this question.

Answer 2

if you can determine when your canvas size is changed then fire a event that will set the dimensions of the div dynamically as according to the changed dimensions of the canvas