html - Jquery windows.width(height) with overflow -

i have problem size of window. taking size of window

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

and create 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 got overflow width , height.

i want create canvas fit window size. now, got lot of overflow

i add margin:0 , padding:0 body

well, tried find "normal" solution didn't found, here "tricky" solution. idea assome need customize fit project.

the logic create div take full width , height of document , set canvas dimensions according it. final step restore states of 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