Document height increases when resizing when resizing canvas

Question

I'm trying to get the canvas element to take the entire height of the document and the width of the window, so when I resize the window, the canvas element is stretched along with it, actually giving me a full screen canvas. However, this is actually the height of the document (and therefore the height of the canvas) increases regardless of how the window is resized.

I am using this code:

$(document).ready(function () { $("#wrapper").before("<div id='background'><canvas id='depth' width='"+$(window).width()+"'height='"+$(document).height()+"'></canvas></div>"); $(window).resize(function() { $("#depth").attr("width",$(window).width()); $("#depth").attr("height",$(document).height()); }); }); 

I also tried using DOM scripts with the same result. Is this a fad for resizing canvas elements, or am I missing something?

Here is the problem in action

Answer 1

I think this should work? It adapted from the code I wrote to ensure that #wrapper always stretched to get to the bottom of the screen if the content had not already done so (but I removed the minimum height restrictions). I am sure you can adapt this to your needs and for the width.

The summary in which you are mistaken is mathematics to calculate what height should be in case of a negative change of a window.

I also left a few extra bits that you can see that deal with some browser inconsistencies when calculating the window height; solved a couple of errors that I found.

 $(document).ready(function() {resize()}); $(window).resize(function() {resize()}); // Calculate Required Wrapper Height function resize() { // I think this is for Opera benefit? var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height(); // IE7 if (jQuery.browser.msie) { if(parseInt(jQuery.browser.version) == 7) { viewportHeight -= 3; } } if($('#wrapper').height() > viewportHeight) { $('.content').height($('#wrapper').height() - viewportHeight); } if($('#wrapper').height() < viewportHeight) { $('.content').height(viewportHeight - $('#wrapper').height()); } }