All geek questions in one place

CSS-positioned canvas, the size of which is different from other elements of the block (restrictions on the properties of the upper left, lower right)

It puzzled me and intrigues, I hope.

I am wondering if anyone can point me to the source of this difference in behavior in terms of the CSS / canvas specification, I know other solutions on how to fill the parent container, so don't respond to such answers.

Consider this 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/ . This HTML result causes the default canvas size and width and height to indicate that the canvas specification requires (300x150) instead of filling the parent container according to CSS rules. You can verify that this works without any changes for any other block element, for example div: http://jsfiddle.net/8AQVj/1/

Again, we are talking about the size of the element on the screen, and not about the size of the contents of the canvas. The behavior is consistent in Chrome, Firefox, and IE, so I assume this should be based on a specification somewhere, but I could not find the appropriate snippet.

+4
source share
1 answer

The size attributes that you have for the canvas are set to auto, which is the default value for these attributes, and therefore you will get the default size in this case. If you change it to inheritance, it will fill the parent container, even if its context specified in the tag itself is set to specific measures. Just to make sure I'm right, I checked it in the violin.

0
source

Source: https://habr.com/ru/post/1491404/

More articles:


All Articles