Full viewport fixed position canvas on mobile browsers

Question

I want to use a canvas element to cover the entire viewport of my browser window as a background. I use Javascript to set the width and height of the canvas. A problem arises when the page scrolls and the address bar hides. The address bar scrolls away and leaves a gap on the page. There doesn't seem to be an event for address bar movement, so I have no way to readjust the size of the canvas when the address bar disappears. I can benefit from knowing three things:

Is there a way to detect address bar movement/hiding?

Is there a way to consistently get the inner dimensions of the actual viewport across all major browsers?

Is there a way to add an event listener to detect a change in the inner dimensions of the viewport?

EDIT: Here's some code:

// This is how I size my canvas;
function resize(event) {
  context.canvas.height = document.documentElement.clientHeight;
  context.canvas.width = document.documentElement.clientWidth;
}

window.addEventListener("resize", resize, false); // resize every time window changes
resize(); // Call function once to size the canvas

/* This is the CSS for my canvas */
canvas {
  position:fixed;
  top:0px;
  left:0px;
  margin:0;
  padding:0;
  z-index:-1; /* Forces canvas to background */
}

Edit 2:

I changed my resize function to:

context.canvas.height = window.innerHeight;
context.canvas.width = window.innerWidth;

The canvas does resize, which means that a resize event does fire when the address bar hides, but it does not fire until the address bar is completely hidden, because until it hides completely, no resizing takes place. This means a gap is still shown while scrolling, but is then filled once the address bar is hidden.

So far my code is very simple. The `resize` event does not fire when the address bar moves or hides. I need to find a way to detect when the address bar is moving so I can resize my canvas then. I have tried using the `scroll` event as well, but that doesn't work either without revealing the gap. — Frank, May 10 '17 at 22:27

score 1 · Answer 1 · answered May 10 '17 at 22:17

1

I would make a function that resizes the canvas depending on the browser's window.innerHeight and window.innerWidth when the resize event occurs:

(function() {

    // triggers when the address bar hides
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        drawOnCanvas(); 
    }

    // call it for the starting windows size
    resizeCanvas();

    function drawOnCanvas(){
       // here you can re-draw something on your canvas whenever the size changes
    }

});

answered May 10 '17 at 22:17

Agu Dondo

12,638
7
57
68

I tried this and it does fit the canvas to the screen correctly, but since no `resize` event fires when the address bar moves, the canvas is never resized and a gap emerges at the bottom of the viewport in the absence of the address bar. – Frank May 10 '17 at 22:23
This actually works when I use a `scroll` event instead of a resize event, but the lag on the scroll event still reveals the gap and I also don't want to resize my canvas every time the page is scrolled. – Frank May 10 '17 at 22:24
What if you disable the hiding of the address bar doing: `$("html, body, canvas").css({ height: $(window).height() });` – Agu Dondo May 10 '17 at 22:31
I am not great with JQuery. Would this set the height of the html, body, and canvas elements in CSS to equal the height of the window? My page scrolls downwards, so the body element is much taller than the window's height. – Frank May 10 '17 at 22:35
I could freeze the address bar in place by nesting all my content in a scrollable div and setting the body's overflow to hidden, but I was saving this as a last resort simply because I do not want to totally freeze the address bar and always have to look at it. – Frank May 10 '17 at 22:37
Actually, my first comment was wrong, a `resize` event does fire, but not until after the address bar is completely hidden. I edited my question to reflect this. – Frank May 10 '17 at 22:52

Full viewport fixed position canvas on mobile browsers

1 Answers1