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

Your code for height/width isn't valid. Try `style="height: 300px; width: 200px;"`. — Jeroen, May 18 '12 at 09:08

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

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.

edited May 23 '17 at 10:34

Community

1
1

answered May 18 '12 at 11:48

Jeroen

60,696
40
206
339

regarding non validity please see http://www.w3schools.com/html5/html5_canvas.asp, it's not true that height and width properties are not valid... – anjalis May 19 '12 at 10:15
yeah it works like this:

– anjalis May 19 '12 at 10:27
@anjalis Sure, using width/height via properties is also fine, but before [your edit](http://stackoverflow.com/posts/10649567/revisions) it was neither using style nor attributes correctly. I've updated my answer accordingly. As far as I can see this should answer your question. – Jeroen May 19 '12 at 11:27
any news about this 5 pixel bottom margin ? I've got this exact problem. I'm gona ask the question. – Guian Apr 04 '13 at 09:36
see the related question here :http://stackoverflow.com/questions/15807833/div-containing-canvas-have-got-a-strange-bottom-margin-of-5px – Guian Apr 04 '13 at 09:49

Neji · Answer 2 · 2012-05-18T09:17:16.750

0

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

edited May 18 '12 at 09:17

answered May 18 '12 at 08:59

Neji

6,591
5
43
66

It doesn't work
– anjalis May 18 '12 at 09:10
Set the div to a different [display](http://www.w3.org/TR/CSS2/visuren.html#display-prop), for example `inline-box`. – Jeroen May 18 '12 at 09:19
Ah yes, typo there. I've posted my suggestion as an answer with working fiddle and screenshot. – Jeroen May 18 '12 at 11:48

div stretching containing canvas

Hi i am trying to have this:

2 Answers2