CSS-positioned canvas sized differently than other block elements (constraints on top left bottom right properties) -
this puzzled me , intriguing, hope.
i'm interested if can point me @ source of difference in behavior in terms of css/ canvas specification, know other solutions on how fill parent container please no such answers.
consider html:
<!doctype html> <html lang="en"> <head> <style type="text/css"> html, body, #container { height: 100%; width: 100%; padding: 0; margin: 0; } #container { position: relative; } #content { position: absolute; border: 1px solid red; background-color: blue; top: 0; bottom: 0; left: 0; right: 0; width: auto; height: auto; } </style> </head> <body> <div id="container"> <canvas id="content"></canvas> </div> </body> </html> jsfiddle: http://jsfiddle.net/2zh5h/. html results in canvas being sized default width/ height canvas spec calls (300x150) instead of filling parent container css rules define. can verify works without changes other block element, example div: http://jsfiddle.net/8aqvj/1/
again, we're talking size of element on screen, not canvas context's dimensions. behavior consistent in chrome, firefox , ie guess has stem specification somewhere couldn't find relevant fragment.
the size attributes have there canvas set auto default these attributes, , therefore default size in case. if change inherit, fill parent container, if context specified in tag set specific measures. make sure right, checked in fiddle.
Comments
Post a Comment