canvas width in % not works get converted to px

[gauravcoder]

hi see below link http://liveweave.com/I6JyFT

when i assign canvas width like 100% it takes 100px width why so ,

<canvas id=”canvas” width=”100%” height=”100%”>
become
<canvas id=”canvas” width=”100″ height=”100″>

what to do to make canvas match width of parent width , i could not find how to solve it , think bit tricky css issue

html code

<table><tr valign="top"><td>
</td><td>
<table align="center">
<tr valign="top">
<td>
left
</td><td>
            <div id="content">
              <table border="1" width="100%">
                <tr  width="100%"><td style="border:1px solid red">
                    <canvas id="canvas" width="100%" height="100%" style="width: 100%; height: 100%; position: relative">
                    </canvas>
                <div id="canvas-drop-area"></div>
                </td></tr>
              <tr><td style="border:1px solid red">
                    <canvas id="canvas1" width="320" height="256">
                    </canvas>
                <div id="canvas-drop-area1"></div>  
                </td></tr>              
            </table>
            </div>
</td><td>
right
</td></tr>

</table>

css code below

body{
    background-color:#FBFBFB;
    width:800px;
}
#wrapper{
    margin: 0 auto;
    width: 100%;
    border: 1px solid #999;
    padding: 5px;
    overflow: hidden;
}
#content{
    float:left;
}
#canvas{
    width:320px;
    height:256px;
    overflow:hidden;
    float:left;
    border:1px solid #000000;
}
#canvas1{
    width:320px;
    height:256px;
    overflow:hidden;
    float:left;
    border:1px solid #000000;
}

[Senff]

I’m not 100% sure on this, but I believe the canvas element has to have its width and height defined in pixels.

You can resize it with some jQuery (based on browser window size) but it always has to have pixel-based values for width and height.

[Paulie_D]

From MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

height
The height of the coordinate space in CSS pixels. Defaults to 150.

width
The width of the coordinate space in CSS pixels. Defaults to 300.

[MattDiMu]

AFAIK the height and width defined as attributes of a canvas element, just define the the original size of the canvas, just like every image already has its own width and height (which is used, when width:auto; and height: auto; are set by CSS).

So it should be possible to generate a canvas with a certain size (defined by width and height attributes) and resize it afterwards by using css width and css height:

<canvas id=”canvas” width=”1000″ height=”500″></canvas>

#canvas {
width: 100%;
}

The quality might suffer through this, as the canvas is resized by css, but basically it should work.

[gauravcoder]

can u please update code at liveweave ?? , i do not want to give static height width as i will be using it across multiple deives

[Paulie_D]

can u please update code at liveweave ??

You have the code, you can try again and repost if it doesn’t work for you.

[Senff]

Maybe you misunderstood.

In the HTML/DOM, the canvas dimensions have to be defined in pixels. This sounds like it’s static, and technically it is, but you can resize and make it dynamic with CSS, and use percentages.

You can NOT use percentages in the HTML part.

See this pen for an example, where the canvas is 100% of the (outlined) container:

http://codepen.io/senff/pen/vEOwvY

[Author]

Posts