trying to make an element render the full size of the screen:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<canvas></canvas>
<script>
(function(){
var canvas = document.getElementsByTagName("canvas")[0];
canvas.style.background = "#0f0";
canvas.style.width = screen.width + "px";
canvas.style.height = screen.height + "px";
console.log(
"screen.width: " + screen.width +
"\nscreen.height: " + screen.height +
"\ncanvas.width: " + canvas.style.width +
"\ncanvas.height: " + canvas.style.height
);
})()
</script>
</body>
</html>
but the canvas element renders with approximately twice the width and twice the height of the screen in chrome v22 but it seems to be fine in FF.
I get console output:
screen.width: 1366
screen.height: 768
canvas.width: 1366px
canvas.height: 768px
if I manually set the width and height of the canvas in chrome I have to use:
canvas.style.width = 780 + "px";
canvas.style.height = 435 + "px";
to get it to the size of the screen in chrome but then checking in FF this renders as expected to be just over half the screen in both dimensions.
update:
I tried this:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body style="padding:0;margin:0;">
<div>
<canvas>
</canvas>
</div>
<script>
(function(){
var div = document.getElementsByTagName("div")[0],
canvas = document.getElementsByTagName("canvas")[0];
div.style.background = "#f00";
div.style.width = screen.width + "px";
div.style.height = screen.height + "px";
canvas.style.background = "#0f0";
canvas.style.width = "100%";
canvas.style.height = "100%";
console.log(
"screen.width: " + screen.width +
"\nscreen.height: " + screen.height +
"\ncanvas.width: " + canvas.style.width +
"\ncanvas.height: " + canvas.style.height
);
})()
</script>
</body>
</html>
but it has the same effect, works in FF but not in chrome.
I did this before on my test site http://www.0xor1.com but I used jQuery css({width:screen.width, height:screen.height}) to set it which is why it works but I don’t understand why this way doesn’t work in chrome.
Width and height of canvas element should be marked like:
Css styles messes it up