Jquery windows.width(height) with overflow

Question

i have a problem with the size of window. I am taking size of window like this

var boxwidth = $(window).width();
var boxheight = $(window).height();

And then create a canvas

var canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = boxwidth;
    this.canvas.height = boxheight;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }

But i got overflow to width and height.

I want to create canvas which fit perfectly a window size. Now, i got a lot of overflow

I already add a margin:0 and padding:0 to body

Answer 1

Well, I tried to find a "normal" solution but I didn't found, so here is a "tricky" solution. This is an idea but I assome that you will need to customize it so it will fit to your project.

The logic is to create a div that it will take the full width and height of the document and set the canvas dimensions according to it. The final step is to restore the states of the elements (html, body etc.)

So:

$('html, body').css({position: 'relative', height: '100%', overflow:'hidden'});
var tester = $('<div style="width:100%;height:100%" />').appendTo(document.body);
$('canvas').css({
  width:$('body').width(),
  height:tester.height()
});
tester.remove();
$('html, body').removeAttr('style');

html, body {
  margin:0;  
}

canvas {
  background:red;
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas></canvas>

http://jsbin.com/pinide/edit?html,css,js