HTML Canvas will not resize in IE

Question

I'm making a game and want the game canvas to line up on the page so it sits nicely in the arcade cabinet frame graphic. I set it up with percentage widths and a canvas height of "auto." Works great in Firefox and Chrome.

Unfortunately, in some versions of Internet Explorer (specifically 9), canvas height doesn't work the same way as it does in the other browsers. Firefox lets the height resize in a sensible way when you set it to "auto," but IE works differently.

So I'm trying to resize it dynamically with Javascript. Here's the code I'm using. I'm not very good with JS. I pretty much just copied this from a Google search and changed the variable names.

Can anyone help me figure out why it isn't working?

<script>
    (function() {
        var 
            htmlCanvas = document.getElementById('c2canvas'),
            context = htmlCanvas.getContext('2d');
        initialize();

        function initialize() {
            window.addEventListener('resize', resizeCanvas, false);
            resizeCanvas();
        }


        function resizeCanvas() {


            var width = htmlCanvas.width;
            var height = width * (224/256);
            htmlCanvas.height = height;
            htmlCanvas.style.height = height + 'px';

        }

    })();
</script>

Link to the game

Answer 1

Some older versions of IE, like IE9 treat CSS height:auto differently. And try to inherit the CSS height from the elements parent.

Instead of trying to change the CSS style height on the canvas element. Set the height attribute of the canvas element instead using setAttribute()

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

<script>
(function() {
    var 
        htmlCanvas = document.getElementById('c2canvas'),
        context = htmlCanvas.getContext('2d');
    initialize();

    function initialize() {
        window.addEventListener('resize', resizeCanvas, false);
        resizeCanvas();
    }


    function resizeCanvas() {

        var width = htmlCanvas.width;
        var height = width / 2.031;
        /* set the height attribute instead of using CSS style height */
        htmlCanvas.setAttribute(height,height);

    }

})();
</script>

Don't forget to add to your CSS stylesheet

#c2canvas{
    display: block;
    width: 100%;
}

Also have a look at this Paul Irish article on debounce resize event so this way your resize event will only fire at the last resize fired event. Since resize fires constantly on every movement of the window.

Answer 2

If you're trying to maintain an aspect ratio, try this:

<div style="height:0;padding:87.5% 0 0;width:100%;position:relative;">
    <canvas style="height:100%;width:100%;position:absolute;top:0;left:0;" >
</div>

Can be done with CSS, obviously.

% padding on the vertical is based off of the width of the element. The absolutely positioned element inside then takes into account height and vertical padding when calculating its 100% height.