javascript screen.width and screen.height not rendering as expected

Question

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 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.

Seems to working fine in chrome and FF, what browser are you testing it with? — JAR.JAR.beans
– JAR.JAR.beans, Commented Oct 28, 2012 at 13:31
As pointed out, setting your canvas dimensions with style isn't the right approach, but it should also be noted that a wider issue is likely to affect what you're trying to achieve depending on your implementation and target devices. Here is a great article detailing the quirks of calculating screen and viewport dimensions cross-platform. tripleodeon.com/2011/12/first-understand-your-screen — amustill
– amustill, Commented Oct 28, 2012 at 13:33
I couldn't see any problem with FF and chrome. Sometimes there could be a visual problem. You can measure the width and height by using a screen ruler like this. Screen Ruler — prageeth
– prageeth, Commented Oct 28, 2012 at 13:35
Work OK in Firefox 15, Chrome22, and Opera11. Are you using MSIE? — Jay
– Jay, Commented Oct 28, 2012 at 13:37
I'm using chrome v22.0.1229.94 I've just tried it in FF and it works ok. my screen is 1366 x 768 and my logs say that the canvas is the same in "px" but it's definately rendering almost twice as big in each dimension. if I manually set the width and height of the canvas it's about 780px wide that makes it fill the screen :S which just confuses me — Daniel Robinson
– Daniel Robinson, Commented Oct 28, 2012 at 14:08

Matti Mehtonen · Accepted Answer · 2012-10-28 13:28:42Z

2

Width and height of canvas element should be marked like:

<canvas id="myCanvas" width="200" height="200">

Css styles messes it up

answered Oct 28, 2012 at 13:28

Matti Mehtonen

1,70515 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bukart · Accepted Answer · 2012-10-28 13:28:54Z

0

Maybe your window is much smaller then your screen. You can't cover more then the window, so maybe screen isn't what you want.

if changed it so this, so it covers the whole body

        var canvas = document.getElementsByTagName("canvas")[0];
        var body = document.getElementsByTagName("body")[0];
        canvas.style.background = "#0f0";
        canvas.style.width = body.offsetWidth + "px";
        canvas.style.height = body.offsetHeight + "px";

answered Oct 28, 2012 at 13:28

bukart

4,9162 gold badges23 silver badges40 bronze badges

Comments

lrsjng · Accepted Answer · 2012-10-28 13:46:02Z

0

Try to set

canvas.width = screen.width + "px";
canvas.height = screen.height + "px";

without the .style.

edited Oct 28, 2012 at 13:46

user647772

answered Oct 28, 2012 at 13:28

lrsjng

2,6151 gold badge21 silver badges24 bronze badges

Collectives™ on Stack Overflow

javascript screen.width and screen.height not rendering as expected

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related