How to center a dynamically sized canvas in a viewport?

Question

I've been struggling with this for some time and I'm hoping you guys can help. I have a dynamically sized canvas that draws a grid based on the canvas size that is refusing to center. I've tried a lot of the suggestions from this site, but they all seem to apply to fixed width canvases. This won't work for me..

Here is all of the code, so you can see everything I'm doing.. I'm using mootools to do the dynamic resize of the canvas and contents. If there's a way to resize without mootools that anyone knows of, that would be great too.

Thanks!

HTML

<!doctype html>
<html>
        <LINK href="style.css" rel="stylesheet" type="text/css">
<head>
<meta charset="utf-8">
        <script type='text/javascript' src='https://my-youtube.googlecode.com/files/mootools-core-1.4.2-full-nocompat.js'></script>
        <script type='text/javascript' src="chessboard.js"></script>
<title>Untitled Document</title>
</head>

<body>

<div id="header"></div>
<div id="content">
    <canvas id="canvas">TEST</canvas>
</div>

<div id="footer"></div>

</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

#header {
    margin-top: 0px;
    height: 75px;
    width: 100%;
    background: url(images/logo1.png) no-repeat top center;
}

#content {
    width: 100%;
    height: 100%-75px;
}

#footer {

}

body, html {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    background-color: #a6a6a6;
    background-image: url(images/background_image3.jpg);
    background-repeat: repeat-x;
    height: 100%;
}

Javascript

window.addEvent('load', function() {
(function() {
    var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

// resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        canvas.height = window.innerHeight-100;
        canvas.width = canvas.height;

        drawStuff();
    }

resizeCanvas();

    function drawStuff() {

        var width = canvas.height/8;
        var baseX = 0.5, baseY = 0.5;


// draws the 8 by 8 chessboard
        for (var i = 0; i < 8; i++) {
            for (var j = 0; j < 8; j++) {
                var x = baseX + width * i, y = baseY + width * j;
                context.strokeRect(x, y, width, width);
                if ((i + j) % 2 != 0) {
                    context.fillStyle = '#BA1A1A';
                    context.fillRect(x, y, width, width);
                }
                if ((i + j) % 2 == 0) {
                    context.fillStyle = 'E6A3A3';
                    context.fillRect(x, y, width, width);
                }
            }
        }
    }
})();
});

I got it figured out thanks to the answer in this question: http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width — Dshiz, Aug 19 '12 at 22:54

score 2 · Accepted Answer · edited May 23 '17 at 11:58

I got it figured out thanks to the answer in this question: Centering a div block without the width

In short, use display: inline block; in the CSS for the div container. Then use text-align: center; in that div's parent container.

So, in my case:

#content {
    margin: 0 auto;
    text-align: left;
    background-color: black;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

body, html {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    background-color: #a6a6a6;
    background-image: url(images/background_image3.jpg);
    background-repeat: repeat-x;
    height: 100%;
    text-align:center;
}

How to center a dynamically sized canvas in a viewport?

1 Answers1