Resizing the canvas

Question

I'm trying to design a web using flex-boxes in order to fit it to any kind of screen size. My main screen has a canvas, so... which is the best way to resize the canvas during the inizialitation?

I have tried these two ways. My first way was to use CSS and set a percentage for its size. For example, width=100% and height=100%. Despite the design worked, I found that there were a lot of issues when playing with the coords of my canvas. For example, when dragging an item, my mouse coords where amplified by ten times or so. Despite I could manage that, I think it's not the best approach.

The second way was to set a fixed size when the onload and onresize events when they are fired. I was doing something like this:

window.initHeight = window.screen.height;
window.initWidth = window.screen.width;
/*The height of the navbar.*/
navbar.height = document.getElementById('navbar').offsetHeight;

canvas = document.getElementById('canvasStage');
canvas.width = window.initWidth;
canvas.height = window.initHeight - navbar.height;

canvas.setAttribute("width", canvas.width);
canvas.setAttribute("height", canvas.height);

The problem is that the height seems to be too big: http://i.imgur.com/WI0jGH2.png How could I fit the screen exactly through this way?

The third way, but I'll try to avoid it, is to set a fixed size and let the small screens to scroll on the page.

Thanks!

UPDATED: This is my JSFiddle: http://i.imgur.com/NRTykLv.png

Answer 1

window.screen.width and window.screen.height returns the width and height of the screen which includes all bars (evrything you see on your screen).So you have to use window.innerHeight and window.innerWidth in order to get the view port height and width

Replace

window.initHeight = window.screen.height;
window.initWidth = window.screen.width;

with

window.initHeight = window.innerHeight;
window.initWidth = window.innerWidth;