Centering fullscreen in javascript/html

Question

I'm trying to make the fullscreen option work in html/javascript.

I have placed my canvas and buttons in a div, fullscreen works, But now I want to center my game in the middle of the screen, and I want my canvas height to be equal to the monitor height of the display. And I want my width to be equal to my height. So my canvas has the shape of a square.

I think I need css for this, but I never used it so I don't know where to start.

My html code looks now like this:

<div id="theGame">
<canvas id="canvas" width="500" height="500" style=" position:absolute; top:40px; left:0px; border:6px  ridge #FFAB00;"></canvas>
<button buttonSpecs... </button>
<button buttonSpecs... </button>

</div>

Currently when I'm in fullscreen it looks like this: https://www.dropbox.com/s/ee4bv0cn2tm2nns/fullscreen.jpg

But thats not how I want it, I want it like this: https://www.dropbox.com/s/cu54fqz0gzap1ul/howIwant.jpg

So you are starting with canvas before knowing css fundamentals? — Eric Herlitz, Nov 03 '13 at 12:55
I was writing a little javascript game, not a website... We learn only javascript at school. But I want to use a bit of css/html in my game. — Bosiwow, Nov 03 '13 at 13:08

score 0 · Answer 1 · edited May 23 '17 at 12:13

See the following question: HTML5 Canvas 100% Width Height of Viewport?

(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.width = window.innerWidth;
        canvas.height = window.innerHeight;

        /**
         * Your drawings need to be inside this function otherwise they will be reset when 
         * you resize the browser window and the canvas goes will be cleared.
         */
        drawStuff(); 
}
resizeCanvas();

function drawStuff() {
        // do your drawing stuff here
}
})();

score 0 · Answer 2 · edited Nov 06 '13 at 02:37

0

Okay, I can now stretch the canvas, using

CSS:

#canvas {
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  z-index: 0;
}

edited Nov 06 '13 at 02:37

Michael Petrotta

56,954
26
136
173

answered Nov 05 '13 at 09:40

Bosiwow

1,665
2
22
42

user2815780, if you have more detail to add to your question, please edit your original text. You might also want to ask a whole new question. – Michael Petrotta Nov 06 '13 at 02:40

Centering fullscreen in javascript/html

2 Answers2