Search code examples
htmlcanvasstretching

div stretching containing canvas

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

Solution

  • 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.